关于localStorage的一点认识

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36172505/article/details/83412317

引言

在HTML5出现之前，为了保存用户在网站中一些操作状态，以便于下次打开页面时恢复到上次访问时的一些状态，在浏览器端常常使用Cookie来存储一些信息。最典型的应用是判断用户是否登录过网站。但是，Cookie的大小受限，每个Cookie的大小不超过4KB，浏览器一般只允许存放300个Cookie，而且Cookie也存在安全性问题。
于是，HTML5为我们带来了全新的本地存储方式：localStorage，有5M大小，而且从IE8就开始支持了。也就是说IE6、7是不支持localStorage的，Cookie可以成为IE6、7下的一种替代方案。

API

   //获取键值对数量
    localStorage.length()
    //读取
    localStorage.getItem('key')
   // 添加/修改
    localStorage.setItem('key','value')
   // 删除对应键值
    localStorage.removeItem('key')
    //删除所有数据
    localStorage.clear()

有效期和作用域

localStorage存储的数据是永久性的，其作用域限定在文档源级别（只要URL的协议、端口、主机名三者中有一个不同，就属于不同的文档源）。除此之外，localStorage也受浏览器限制，如果使用chrome访问一个网站，下次用firefox再次访问是获取不到上次存储的数据的。

实例使用

localStorage 存的值经小编测试应该是要求是字符串类型，如果从后台获取的json数据不经过jsonstringify（）转换，或者使用JQ中的string（）或 .tostring()函数，会发现存不进去的。
如下：

获取直接使用对应的API

 var token = localStorage.getItem('token');

在浏览器中按f12,使用F12调试工具，可以查看到localStorage中的存储信息

如果有的话，说明存储成功，之后在localStorage作用域下都可以直接用getItem（）取出token了