LocalStorage的简介(和cookie)

Love The Way You Lie 2022-06-08 10:09 197阅读 0赞

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题（cookie中每条cookie的存储空间为4K），localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

LocalStorage的优点：

localStorage扩展了cookie的4K限制，可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的这对于前端页面的数据库，相对于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的(IE8以上，chrome4以上)

局限：

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

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

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

localStorage不能被爬虫抓取到。

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

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换为字符串形式，这个时候我们可以使用JSON.stringfy（）这个方法，来将JSON转换成为JSON字符串。

读取之后，要将JSON字符串转换成为JSON对象，使用JSON.parse（）方法。

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

localStorage生命周期是永久的，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有sessionStorage存储的数据也就被清空了。

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意到是，页面即标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

附：同源的判断规则：

http：//www.test.com

[https://www.test.com][https_www.test.com](不同源，因为协议不同)（后文有讲http和https的区别）

http：//my.test.com(不同源，因为主机名不同)

http：//www.test.com:8080(不同源，因为端口不同)

localStorage和sessionStorage使用相同的API

localStorage.setItem（”key”,”value”）;//以”key”为名称存储一个值”value”.

localStorage.getItem(“key”);//获取名称为key的值

枚举localStorage的方法：

For(var i=0;i<localStorage.length;i++)\{

Var name=localStorage.key(i);

Var value=localStorage.getItem(name);

删除localStorage中存储信息的方法：

localStorage.removeItem(“key”);//删除名称为”key”的信息

localStorage.clear();//清空localStorage中所有信息。

通过getItem或直接使用localStorage\[“key”\]获取到的信息均为实际存储的副本

localStorage.key=\{value1：”value1”\};

localStorage.key.value1=”a”;

这里是无法对实际存储的值产生作用的，下面的写法也不可以

localStorage。getItem(“key”).value1=”a”;

localStorage自带的一些方法，常用的API的目录

<table> 
 <tbody> 
 <tr> 
 <td colspan="2"> Clear </td> 
 <td colspan="2"> 清空localStorage上存储的数据 </td> 
 </tr> 
 <tr> 
 <td colspan="2"> getITem </td> 
 <td colspan="2"> 读取数据 </td> 
 </tr> 
 <tr> 
 <td colspan="2"> hasOwnProperty </td> 
 <td colspan="2"> 检查localStorage上是否保存了变量X，需要出入x </td> 
 </tr> 
 <tr> 
 <td colspan="2"> Key </td> 
 <td colspan="2"> 读取第i个数据 的名字或称为键值（从0开始计数） </td> 
 </tr> 
 <tr> 
 <td colspan="2"> Length </td> 
 <td colspan="2"> localStorage存储变量的个数。 </td> 
 </tr> 
 <tr> 
 <td colspan="2"> PropertyIsEnumerable </td> 
 <td colspan="2"> 用来检测属性是否属于某个对象的 </td> 
 </tr> 
 <tr> 
 <td colspan="2"> RemoveItem </td> 
 <td colspan="2"> 删除某个具体变量 </td> 
 </tr> 
 <tr> 
 <td> setItem </td> 
 <td colspan="2"> 存储数据 </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> toLocalString </td> 
 <td colspan="2"> 将(数组)转为本地字符串 </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> ValueOf </td> 
 <td colspan="2"> 获取所有存储的数据 </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

[https_www.test.com]: https://www.test.com