Vue 使用windows 特性之localStorage

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