Vue 使用windows 特性之localStorage解析

符号 阅读:205 2021-03-31 13:25:49 评论:0

localStorage简介

在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage大小会有所不同。

localStorage特征

  • 生命周期是永久的,但是数据实际是存在浏览器的文件夹下,可能卸载浏览器就会删除。
  • 兼容IE8以上浏览器。
  • 有长度限制,5M左右,不同浏览器大小会有不同。
  • 只能存储字符串类型,需要转成字符串存储。(重点:JSON.parse()作用是将字符串转化成引用类型(对象),JSON.stringfy()作用是将引用类型(对象)转换成字符串)如果是基本类型,自动会转换为字符串类型

localStorage基本用法

  • 判断浏览器是否支持localStorage属性
if(!window.localStorage){ 
	alert("浏览器不支持localstorage"); 
    return false; 
} 
else{ 
     //逻辑业务 
 }
  • localStorage存值和取值:localStorage相当于window对象的一个属性,所以拥有[]和.方式调用,localStorage自身的setItem方法(存值)和getItem方法(取值)
var storage=window.localStorage;             
    storage["a"]=1;   //写入a字段           
    storage.b=1;   //写入b字段            
    storage.setItem("c",3);   //写入c字段 
             
    localStorage.getItem("name"); // 自身方法取值 
    localStorage["name"];// []方法取值 
	localStorage.name; // .方法取值 
 
    console.log(typeof storage["a"]); 
    console.log(typeof storage["b"]); 
    console.log(typeof storage["c"]);
  • localStorage修改值和删除值:修改值就是相当于给对应的key重新赋值,就会把原来的值覆盖掉,删除值可以通过对象删除属性的关键字delete,也可以用自身的方法removeItem
//修改值 
localStorage.setItem("name","TOM");// 自身方法 
localStorage["name"]="TOM";// []方法 
localStorage.name="TOM";// .方法 
//删除值 
localStorage.removeItem("name"); 
delete localStorage["name"]; 
delete localStorage.name
  • localStorage遍历所有的key和值
// 通过使用key()方法,向其中出入索引即可获取对应的键 
for (var i=0;i<localStorage.length;i++) { 
    console.log(localStorage.key(i)); 
} 
// 通过for in 循环获取 
for(var key in localStorage){ 
    console.log(key); 
} 
localStorage.valueOf();//取出所有的值 
localStorage.clear();//清除所有的值
  • localStorage判断是否具有某个key,用hasOwnProperty方法
localStorage.hasOwnProperty("name");  // 如果存在的话返回true,不存在返回false
  • localStorage储存字符串类型数据:可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串;读取之后将JSON字符串转换成为JSON对象,使用JSON.parse()方法
var jsonObj={ 
    name:'zhangsan', 
    sex:'man', 
    age:24 
};//定义json类型数据 
var storage = window.localStorage; 
var jsonStr = JSON.stringify(jsonObj);//把json类型数据转换为json字符串 
storage.setItem('zhangSanData',jsonStr); 
console.log(tepeof storage.zhangSanData);//string 
 
var jsonStrx = storage.zhangSanData; 
var jsonObjx = JSON.parse(jsonStrx);/把json字符串装换为json对象 
console.log(jsonObjx);

Vue + localStorage实战运用:购物车增减删物品

let store=new Vuex.Store({ 
  
     state: { 
        cartarry:JSON.parse(localStorage.getItem('cartarry')) || [],//存储购物车商品的数组 
      }, 
  
    mutations: { 
  
        //添加商品到购物车 
        tocart(state,tag){ 
          let goods=state.cartarry.find(v=>v.title==tag.label) 
          if(goods){ 
            goods.cartCount+=1 
          }else{ 
            state.cartarry.push({title:tag.label,cartCount:1}) 
          } 
        }, 
        //购物车商品数量加一 
        cartadd(state,index){ 
          state.cartarry[index].cartCount++ 
        }, 
        //购物车商品数量减一 
        cartremove(state,index){ 
          if(state.cartarry[index].cartCount>1){ 
            state.cartarry[index].cartCount-- 
          }else{ 
            if(window.confirm('确定从购物车移除商品吗?')){ 
              state.cartarry.splice(index,1) 
            } 
          } 
        }, 
        //清空购物车 
        clearcart(state){ 
          state.cartarry=[] 
        } 
    }, 
     //相当于我们vue 计算属性 
      getters:{ 
          countsum:state=>{ 
            let num=0 
            state.cartarry.forEach(v=>{ 
              num+=v.cartCount 
            }) 
            return num 
          } 
  }, 
  
  
  
}) 
  
//监听每次调用mutations的时候,都会进这个方法,然后我们可以做一些自己想做的处理 
store.subscribe((mutations,state)=>{ 
  localStorage.setItem('cartarry',JSON.stringify(state.cartarry)) 
}) 
  
export default store

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
KIKK导航

KIKK导航

关注我们