了解 HTML5 存储的摘要笔记

先说cookies

1. http请求头上会带着。
2. 大小受url长度限制最大为 4KB。
3. 主 Domain 域名污染。

HTML5 几种存储方式

优点：

1. 存储空间大。
2. 接口丰富。
3. 数据相对安全。
4. 关系型。
5. 省流量。

缺点：

1. 浏览器兼容。
2. 同源限制，不可跨域。
3. 浏览器存放，要操作需用脚本控制。
4. 更新策略，需要手动写业务。

本地存储

存储形式：key->value
过期：永不过期，除非手动删除。
大小：官方文档说每个域名5MB。
存储内容：图片，数组，json数据，脚本，样式文件。

localStorage

getItem(key, value)
setItem(key)
removeItem(key)
key(number)
clear()

使用注意事项：

1. 使用前判断浏览器是否支持。
2. 写数据时要进行异常处理，避免超出容量抛错。
3. 避免把敏感信息存入 localStorage。
4. key 的唯一性。

使用限制：

1. 无过期时间限制，需手动添加。
2. 子域名之间不能共享存储数据。
3. 超出存储大小之后需要手动写业务算法清除旧纪录。
4. 不做处理的情况下，server端是获取不到数据的。

使用场景

1. 利用本地数据，减少网络传输。
2. 若网络环境下，高延迟，低带宽，尽量把数据本地化。

sessionStorage

和 localStorage 原理差不多，就是sessionStorage只在当前网页，关闭当前网页或重新开启当前网页 sessionStorage失效。

离线缓存 application cache（废弃）

让 web应用在离线的情况下继续使用，通过 manifest 文件指明需要缓存的资源。

检测是否在线：navigator.onLine

使用：创建 manifest文件。
如何更新：如果有资源被修改，必须通过修改 manifest文件来刷新被缓存的文件列表。
优势：

1. 完全离线。
2. 资源被缓存，加载更快。
3. 降低 server 负载压力。

使用缺点：

1. 含有当前 manifest属性的当前请求页无论如何都会被缓存。
2. 更新需要通过 manifest文件并刷新需要更新的页面（需要两次刷新才能获取更新资源）。
3. 更新是全局性的，无法进行单点更新。
4. 对于链接的参数变化很敏感，url上任何一个参数的修改都会被重新缓存。

使用场景：

1. 单地址页面。
2. 对实时性要求不高的业务。
3. 离线 webapp。

IndexedDB 和 Web SQL

一种能够在浏览器中持久存储结构化数据的数据库，并且为 web应用提供了丰富的查询能力。

按域名分配独立空间，一个独立域名下可以创建多个数据库，每个数据库可以创建多个对象存储空间(表)，一个对象存储空间可以存储多个对象数据。

增删改查、事务、游标、索引。

并没有很详细地插入代码记录，关键部分都是一笔带过了，仅作个人学习记录啦。