Html5存储总结

HTML5之前的存储方式cookie：

cookie缺陷：

1. 每次的http请求都会带上cookie信息，增加请求耗时
2. 大小为4k的限制

3. 主domain污染

   HTML5存储优势

4. 解决存储大小4k限制
5. 解决请求头常带存储信息的问题
6. 解决关系型存储的问题
7. 跨浏览器

html5本地存储

localstorage&sessionstorage

1. 存储形式：key-value
2. 过期：永久存储，永不失效，除非手动删除
3. 大小：官方文档给出的是每个域名是5M

localstorage

1. 
   
2. 常用API:getItem,setItem,removeItem,key,clear
3. 可存储的内容包括数组，json，图片，脚本，样式文件等可被序列化成字符串的数据
4. 注意事项：
   

1、使用前要判断浏览器是否支持（可通过调用api并捕获异常判断）
2、写数据时，需要异常处理，避免超出容量抛错
3、避免把敏感信息存入localstorage
4、key的唯一性
使用时限制:
存储更新策略，过期控制需要自定义解决
子域名之间不能共享存储数据
超出存储大小之后如何存储（使用LRU、FIFO算法存储）
server端如何取到（使用postmessage等方式）
使用场景：
1.利用本地数据，减少网络传输
2.弱网络环境，高延迟，低宽带，尽量把数据本地化

indexedDB database

一种能在浏览器中持久化的存储结构化数据的数据库，并且为web应用提供丰富的查询能力
注：主流浏览器端如chrom11+,firefox4+,ie10+基本支持,移动端则支持较弱且主要还是支持webSQL。

存储结构

IndexedDB是按照域名分配独立空间，一个独立域名下可以创建多个数据库，每个数据库可以创建多个对象存储空间（表），一个对象存储空间可以存储多个数据对象

H5离线缓存（offline application）

它可以让web应用在离线的情况下继续使用，通过manifest文件指明缓存的资源
注：检测是否在线：navigator.online
离线缓存原理图

原理图中可以看出manifest文件修改后只是去进行app cache(缓存)的更新，而不是直接加载新的缓存，获取到的缓存依旧是更新manifest文件之前指定的缓存。导致的缺陷：

1、用户只有在第二次获取缓存信息时才能获得最新的缓存
2、当只更新其中一个文件时，修改manifest文件，依旧拉取所有指定文件

manifest文件格式

CACHE MANIFEST
#version n.n
#代表manifest文件的版本，当需要更新manifest文件时需要修改version

CACHE:
#需要缓存的文件
/css/sample.css
/images/image.jpg

NETWORK:
#每次重新拉取的文件
# ‘*’为通配符

FALLBACK:
#离线状况下代替文件
/offline.html

如何引用manifest
第一步、在HTML页面引入manifest文件

注：”sample.appcache”这里的路径写的是相对路径和html文件在同一个目录下
第二步、服务器添加mime-type text/cache-mainfest

如何移除manifest引用
第一步、移除HTML页面关于manifest的声明
第二步、修改manifest文件的文件名

使用manifest离线缓存的优势

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

使用manifest离线缓存的优势

1、含有manifest属性的请求页无论如何都会被缓存
2、更新需要建立在manifest文件的更新，文件更新后是需要再次刷新的（需要2次刷新才能获取新资源）
3、更新是全局的，无法单独更新某个文件（无法单点更新）
4、对于链接的参数变化是敏感的，任何一个参数的修改都会被（master）重新缓存（重复缓存含参数页面）index.html和index.html?renew=1会被认为是不同文件，分别缓存

使用场景

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

文章总结自“幕课网-HTML5存储”