客户端存储

1.web存储
web存储有两个我们经常使用的对象，localStorage和sessionStorage，这两个对象实际上是持久化关联数组
web存储特点：容易使用、坚持大容量浏览器（并非不限量），数据存储同时兼容当前所有主流浏览器，但是不兼容早期浏览器
localStorage和sessionStorage在使用方便没什么太大区别，区别在于有效期和作用域
localStorage使用：

localStorage.setItem('name', 'wxn');
localStorage.setItem('age', '18');
for (let i = 0; i < localStorage.length; i++) {
let everyKey = localStorage.key(i);
let value = localStorage.getItem(everyKey);
console.log('everyKey:' + everyKey);
console.log('value:' + value);
}
localStorage.removeItem('name'); //删除 name
localStorage.clear(); //删除全部

注意当前只支持存储字符串类型，所以我们存值和取值时需要手动编码和解码

let data = {
"id": "6384944",
"class": "list-item",
"data-title": "百年孤独",
};
localStorage.setItem('book', JSON.stringify(data));
let book = JSON.parse(localStorage.book);
console.log(book);

上面代码中的使用方法对sessionStorage同样适用，
localStorage 存储的数据是永久性的，除非web应用可以删除存储的数据，或者用户通过设置
浏览器配置来删除，否则数据将一直保留在用户的电脑上，永不过期。同源的文档间可以共享localStorage的数据，甚至可读可写，非同源的文档不共享数据。
sessionStorage 的作用域也是限定在同源文档中，并且，sessionStorage的作用域还被限定在窗口中。如果同源的文档渲染在不同的浏览器标签页中，也是不可共享的，它们分别是两个sessionStorage
localStorage和存储时间都是采用广播机制，浏览器会对目前正在访问的同样站点的所有窗口发送消息

2.cookie存储
一种早期的客户端存储机制，适合存储少量的文本的数据。
cookie存储特点：不论服务器端是否需要，每一次http请求都会把这些数据传输到服务器端。所有新旧浏览器都支持它
cookie的有效期很短暂，只能持续在web浏览器的会话期间，一旦用户关闭浏览器，cookie保存的数据就丢失了。
cookie的作用域默认由文档源限制，可以通过设置cookie的domain设置子域的相互共享
使用：

document.cookie = 'verison='+encodeURIComponent(document.lastModified);

要改变cookie的值需要使用相同的名字、路径和域，但是新的值重新设置cookie的值，同样的，设置新的max-age属性就可以改变原来的cookie的有效期。
要删除一个cookie，需要使用相同的名字、路径和域，然后指定一个任意非空的值，并且将max-age属性指定为0，再次设置cookie
3.IE User Data
IE专属浏览器存储机制，使用不多，不做介绍
4.离线web应用
HTML5 标准中定义了一组“离线web应用”API，用以缓存Web页面以及相关资源（脚本，css文件，图像等）。实现的是web应用整体存储在客户端，而不仅仅是存储数据，哪怕在网络不可用的时候web应用依然是可用的。
关于离线web应用现在很多都在应用，需要考虑到几个问题
应用程序缓存清单：首先创建一个清单包含所有应用程序的所有URL列表，在主页面HTML中配置mainfest属性，指向到该清单文件，该文件必须以CACHE MANIFEST字符串开始，其余就是要缓存的文件URL列表
缓存的更新：可以通过applicationCache.status属性查看当前缓存状态
applicationCache.UNCACHED(0)
应用程序没有设置manifest属性
applicationCache.IDLE(1)
清单文件已经检查完毕，并且已经缓存了最新的应用程序
applicationCache.CHECKING(2)
浏览器正在检查清单文件
applicationCache.DOWNLOADING(3)
浏览器正在下载并缓存清单中列举的所有文件
applicationCache.UPDATEREADY(4)
已经下载和缓存了最新版的应用程序
applicationCache.OBSOLETE(5)
清单文件不存在，缓存将被清除

5.web数据库
很多主流浏览器都开始在继承客户端数据库的功能，但是都因API标准化工作而失败

最后编辑于：2020.05.03 19:23:10