HTML5存储-学习总结

思维导图

H5存储形式：

1. 本地存储( localStorage && sessionStorage)
2. 离线缓存( application cache )
3. IndexedDB 和 Web SQL

本地存储：

sessionStorage

5M，重新打开页面或者关闭浏览器就消失了，关闭tab栏消失

localStorage

1. 每个域名5M，永久存储，永不失效，除非手动删除
2. IE8以上支持
3. localStorage API介绍（getItem 、setItem、removeItem、key、clear）
4. 只要能转换成字符串的都能存在localStorage，数组、json数据、 图片；(利用canvas最终转换成字符串.使用在图片不经常更改的情况下，不过如果图片bash64比较大的话，会比较浪费资源)、脚本、样式文件
5. 注意事项：
   (1) 使用前要判断浏览器是否支持；( setItem，然后catch异常；网上有window.localStorage的方法，不好，有的浏览器可以写入，但无法读出 )
   (2) 写数据时候，需要异常处理，避免超出容量抛错；(5M)
   (3) 避免把敏感的信息存入localStorage
   (4) key的唯一性；(再次存入，会覆盖)
6. localStorage使用限制
   (1) 存储更新策略，过期控制（永不过期，常驻浏览器的记录，业务中实现过期的策略，需要自己加,通过当前时间-localstorage时间差与过期时间比较大小进行过期控制）；
   (2) 子域名之间不能共享存储数据；( cookie支持：可以通过把子域名的document.domain设置成主域名，各个子域名既可以共享数据。可以通过postMessage达到子域名共享localStorage数据的目的)。
   (3) 超出存储大小之后如何存储( 用一些比较成熟的算法淘汰一些数据，如：LRU, FIFO )；
   (4) server端如何取到；( cookie在服务端是可以取到的；localStorage/sessionStorage是纯客户端存储，在服务端取不到，如果要取到， 跟到POST/GET请求相应的参数后面，以达到该目的； )

IndexedDB(以前叫做Web SQL)

定义：一种能在浏览器中持久存储结构化数据的数据库，并为web应用提供了丰富的查询能力。就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引
使用教程

manifest

1. appcache更新注意事项：
   修改资源文件，必须通过修改manifest文件来更新被缓存的文件列表。
2. 优点：
   完全离线；
   资源被缓存，加载更快；
   降低server负载。
3. 缺点：
   含有manifest属性的当前页一定会被缓存；
   更新依赖manifest文件，更新后需要再次刷新；
   更新是全局性的，无法单点更新；
   对于链接的参数变化敏感，不同的参数视为不同的文件。
4. 适用场景：
   单地址的页面（无参数）；
   对实时性要求不高的业务；
   离线webapp。

总结

H5存储

• 优势：

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

• 劣势：

1. 浏览器兼容；( localStorage 和 app cache 主流浏览器都兼容的不错 )
2. 同源策略；( localStorage 不可以跨子域，manifest 所引用的文件必须在同一个域名下面 )
3. 脚本控制；( 只能在浏览器端存放；服务器端想拿到数据，只能通过请求 )
4. 更新策略; ( 不像cookie可以设置过期时间；比如localStorage永不过期，必须自己写一套更新机制 )