关于localStorage的一点认识

野性酷女 2022-05-14 14:35 294阅读 0赞

### 引言 ###

在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()函数，会发现存不进去的。  
如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTcyNTA1_size_27_color_FFFFFF_t_70]

获取直接使用对应的API

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTcyNTA1_size_27_color_FFFFFF_t_70]: /images/20220504/db79c66eddb74303beb4284fa39cae43.png
[f12_token]: /images/20220504/dab5fdee653640c29648c50b1194954f.png