在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