关于localStorage

     我使用locallocalStorage主要在angular里面使用。当时不懂，就网上看了一些资料。

     该文章仅是用于自我对不懂的知识查询学习后做的学习笔记存储，如有侵犯版权请及时通知我移除。

一、sessionStorage与localStorage

 

Web Storage实际上由两部分组成：sessionStorage与localStorage。

 

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

二、localStorage使用

 

localStorage.getItem(key):获取指定key本地存储的值

localStorage.setItem(key,value)：将value存储到key字段

localStorage.removeItem(key):删除指定key本地存储的值

localStorage本地存储的变量值存在于本页面可用

对于json格式的数据存储之前需要 将json转化为json字符串，

JSON.stringify(data);将json格式的data数据转化成为json字符串

localStorage只支持string类型的存储，其他格式的数据经过存取后会自动变成string类型

取出json数据后需要将其转化为json格式读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

var storage=window.localStorage;

            var data={

                name:'xiecanyong',

                sex:'man',

                hobby:'program'

            };

            var d=JSON.stringify(data);

            storage.setItem("data",d);

            //将JSON字符串转换成为JSON对象输出

            var json=storage.getItem("data");

            var jsonObj=JSON.parse(json);

            console.log(typeof jsonObj);

三、localStorage的优势

 

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

 

四、localStorage的局限

 

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

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

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

localStorage只能存储字符串，如果需要存储对象，首先要转化为字符串。利用JSON.stringify()；