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

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


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

学习博客:

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

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

 

你可能感兴趣的:(Vue)