H5的localStorage使用总结

一、localstorage 的优缺点

　　优点：

　　　　1、localStorage 的存储大小是5M,而cookie的存储大小只有4K，解决了cookie存储空间不足的问题

　　　　2、localStorage 可以将第一次请求的数据直接存储到本地，相当于是一个针对前端而言的5M的数据库，相比于cookie可以节约带宽

　　缺点：

　　　　1、浏览器的大小不统一，并且在IE8以上版本才支持

　　　　2、对于一些操作，如F5刷新，会发起 cache-control:max-age=0 的请求

　　　　3、目前所有的浏览器中都会吧localStorage 的值类型限定为string类型，这个在比较常见的JSON中需要做一些转化

　　　　4、localStroage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面卡顿

　　　　5、localStorage 不能被爬虫抓取到

　　localStorage 属于永久性存储，sessionStorage 属于当会话结束时，存储的内容会被清空

二、localStorage 的使用 (增删改查)

　　因为某些浏览器还不支持localStorage，所以可以先做判断

　　if(!window.localStorage){

　　　　alert("浏览器不支持localStorage！请使用高版本的Chrome或者Firefox");

　　　　return false;

　　}else{

　　　　//业务逻辑

　　}

　　1、添加本地存储( 有三种方法，但是推荐使用 getItem() )

　　　　var storage = window.localStorage;

　　　　storage["a"] = 1; //方法一

　　　　storage.b = 2;//方法二

　　　　storage.setItem("c", 3);//方法三  推荐

　　2、获取本地存储(有三种方法，推荐使用getItem())

　　　　var storage = window.localStorage;

　　　　storage.a //1

　　　　storage["b"];//2

　　　　storage.getItem("c"); //3　　

　　3、修改本地存储

　　　　storage.a =4;

　　　　storage.a; // 4

　　4、 删除本地存储

　　　　清除所有内容： storage.clear();

　　　　清除某个键值：storage.removeItem("a");

三、其他需要注意的：

　　我们一般会将JSON存入localStorage ，需要将JSON格式的数据转化为string类型，需使用 JSON.stringify();

　　读取之后要将JSON字符串转化成JSON对象，使用JSON.parse();

　　注：其他类型的也需要转化为string，这里就不再介绍了，下面只介绍了JSON转化为string

　　var storage=window.localStorage;

　　var data={

　　　　name:'user',

　　　　sex:'female',

　　　　age:18
　　};

　　var d=JSON.stringify(data);

　　storage.setItem("data",d);

　　var json=storage.getItem("data");//将JSON字符串转换成为JSON对象输出

　　var jsonObj=JSON.parse(json);

　　console.log(typeof jsonObj);