localStoragelocalStorage可以将第一次请求的数据直接存储到本地,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小(不同的浏览器有所不同)。
localStorage的局限
1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空
localStorage生命周期是永久
sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了
- //判断浏览器是否支持
- if(!window.localStorage){
- alert("浏览器不支持localstorage");
- return false;
- }else{
- //主逻辑业务
- var storage=window.localStorage;
- //写入a字段
- storage["a"]=1;
- //写入b字段
- storage.b=2;
- //写入c字段
- storage.setItem("c",3);
- console.log(typeof storage["a"]);
- console.log(typeof storage["b"]);
- console.log(typeof storage["c"]);//打印出来的都是string类型
- }
官方推荐的是getItem\setItem这两种方法对其进行存取
- var storage=window.localStorage;
- //增
- storage["a"]=1;
- storage.b=2;
- storage.setItem("c",3);
- //删
- storage.clear();//删除所有内容
- storage.removeItem("a");//删除某个键值对
- //改
- storage.a=4;
- //查
- for(var i=0;i<storage.length;i++){
- var key=storage.key(i);
- console.log(key);
- }
JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式,可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串
- var data={
- name:'xiecanyong',
- sex:'man',
- hobby:'program'
- };
- //将JSON对象转换成为字符串
- var d=JSON.stringify(data);
- storage.setItem("data",d);
- //将字符串转换成为JSON对象
- var json=storage.getItem("data");
- var jsonObj=JSON.parse(json);