Vue中localStroage存储

在Vue写项目的时候，有时候会存储一些用户的登录数据到本地，因为localStorage存储不受时间的限制，这就涉及到localStorage的增删改查。

1.增加数据

//保存数据
window.localStorage.setItem(key,value);

2.获取数据

//localStorage获取数据
window.localStrorage.getItem(key);

3.删除数据

     3.1删除单项数据

//删除单项 数据
window.localStorage.removeItem(key);

3.2清楚全部数据

//清楚全部数据
window.localStorage.clear();

4.获取存储的localStorage的个数

//localStorage存储的数据个数
window.localStorage.length

5.遍历localStorage中的数据

   enumObj:function(){
        for(var i=0;i<window.localStorage.length;i++){
            var key =window.localStorage.key(i);
            console.log('key:'+key+'Value:'+window.localStorage.getItem(key));
        }
    }

对上述方法进行一次封装:

const LocalList = 'LocalList';
export default {
    Save:function(item){
        window.localStorage.setItem(LocalList,JSON.stringify(item));
    },
    fetch:function(){
        return JSON.parse(window.localStorage.getItem(LocalList))||[];
    },
    removeAll:function(){
        console.log('删除数据');
        window.localStorage.clear();
        console.log(JSON.stringify(this.fetch())+'删除之后的数据');
    },
    reomeItem:function(key){
        window.localStorage.removeItem(key);
    },
    storageLength:function(){
        return window.localStorage.length;
    },
    updateItem:function(item,key){
        window.localStorage[key]=item;
    },
    enumObj:function(){
        for(var i=0;i<window.localStorage.length;i++){
            var key =window.localStorage.key(i);
            console.log('key:'+key+'Value:'+window.localStorage.getItem(key));
        }
    }
}

学习博客:

https://www.cnblogs.com/xmoomoo/p/5757464.html

https://www.cnblogs.com/mawenqiangios/p/7883223.html