web客户端存储的知识介绍

概述

什么是客户端存储？

使用一些方法、工具（提供的api），将网页（web应用）中的数据存储到用户的电脑上。客户端存储遵循同源策略。

web应用可以选择存储数据的有效期。

客户端存储的几种形式：

[不兼容早期浏览器] web存储：最初是h5 api的一部分，后来作为独立标准。web存储api包含local storage和session storage对象。这两个对象实际上是持久化关联数组，是名值对的映射表，其中“名”，“值”都是字符串。

[兼容性好] cookie：起初是针对服务器端脚本设计使用的客户端存储机制。提供了非常繁琐的api，只适合存储少量的文本数据。而且以cookie形式存储的数据无论服务器端是否需要，每一次http请求都会把这些数据传送到服务器。而目前仍被大量使用的原因是其兼容性好。

cookie数据会带到请求头的cookie字段里面，每次同主域名的请求中，都会传递数据，增加了网络请求的数据量，并且造成主域的污染。

[ie专属] user data：对于ie8以前的浏览器，可以将其用做是web存储的替代方案。

[h5标准] 应用程序缓存：在h5中定义的一组api，它实现的是将web应用整体存储在客户端。h5中增加了应用程序缓存，允许web应用将本身保存到本地。不会随用户清除浏览器缓存而被清除。缓存大小不固定，会被最近一次访问的新数据代替掉。不是真正意义上的缓存。

[浏览器厂商] web：集成客户端数据库功能。但是这类api的标准化最终失败。目前还有一种索引数据库api。

[主流浏览器] 文件api：web应用使用类似基于文件的存储机制。

客户端存储的安全性：

任何客户端存储形式存储数据都不，因此任何形式的客户端存储不应该用来保存密码，商业账号。

应当使用客户端存储机制为网站提升用户体验，而不是用他们来收集和侵犯隐私相关的数据。

---

1.web存储

实现了web存储草案标准的浏览器在window对象上定义了两个属性：localstorage 和 sessionstorage。

两个属性都代表同一个storage对象：一个持久化关联数组，数组使用字符串索引，存储的值也是字符串形式的。

两者的区别在于存储的有效期和作用域不同：数据可以存储多久以及谁拥有数据的访问权。

可以存储结构化数据也可以存储原始类型数据。

localstorage.x = 20;   
var x = parseint(localstorage.x);

//存储一个日期类型时进行编码，获取的时候进行解码
localstorage.lastread = (new date(2018)).toutcstring;
var lastread = new date(date.parse(localstorage.lastread));

localstorage.data = json.stringify({a:3});
var data = json.parse(localstorage.data);

有效期和作用域

localstorage存储数据的有效期是永久性的，作用域是限定在文档源级别的，同时受到浏览器供应商限制（不同浏览器之间访问同一站点无法获取上次的存储数据）。同源的文档间共享localstorage数据。

localstroage的适用范围：

localstroage有5m的容量可以存储，所以可以存储一些不需要和服务器进行交互的一些数据。比如导航栏当前的状态，一些普通的数据进行缓存。甚至我们可以存储html片段，js或者css文件段。由于现在手机端对于localstroage的支持已经非常完善，有很多应用通过版本控制来存储一些不经常改动的js/css文件。减少用户请求带宽的同时优化整个页面的加载速度。

文档源是通过协议，主机名以及端口号确定的。

https://www.example.com  //协议：http  主机号：www.example.com
https://www.example.com  //协议不同
https://static.example.com  //主机名不同
https://www.example.com:8000  //端口号不同

sessionstorage存储数据的有效期与存储数据的脚本所在的最顶层窗口或浏览器标签页是一致的，窗口或者标签页被关闭，那么所有通过sessionstorage存储的数据将被删除。[现在浏览器具备了重新打开最近关闭的标签页随后恢复上一次浏览的会话功能。]

sessionstorage的作用域也是限定在文档源中。同时被限定在*窗口中（如果存在两个