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