浏览器存储

一、客户端存储历程

• 远古时期
  (a) cookies
  (b) userdata
• HTML5时代
  (a) localstorage
  (b) application cache
  © indexedDB

二、远古时代存储方式

1.服务器端存储位置：

• cache：从CB、磁盘上拿出来的东西，存放于内存
• 磁盘文件：资源文件，如图片、视频
• 数据库：mysql等
• 内存：频繁使用的，提高读取效率

2.用cookies方式存储，缺点：

• HTTP请求时会在头部带上cookies，使HTTP请求臃肿，且影响请求的速度
• 大小不能超过4k，不能放过多东西
• 主domain污染（主域名设置了cookie,二级域名也会携带，造成冗余）
• 安全隐患
  因此一般cookies用于购物车和身份证存储

cookies在浏览器中的形态

参考：浏览器存储cookies

2.userdata形式存储（XML文件），能解决cookies的问题，但是只有IE支持

3.H5的目的：

• 解决4k大小问题，扩展容量
• 请求头带存储信息问题，不安全且会越来越臃肿
• 解决客户端关系型存储问题
• 跨浏览器问题
• 为用户节省流量

4.H5存储劣势

• 浏览器兼容，indexDB主流不兼容
• 同源问题，localstorage不可以跨子域
• 脚本控制，服务器端只能通过请求拿到数据
• 更新策略，localstorage永不过期，更新策略需要自己写

三、H5本地存储API

1.localstorage & sessionstorage

• 存储形式：键值对（key-value）
  
• localStorage永久存储，永不失效，除非手动删除，不会随浏览器发送给服务器。
• sessionStorage仅当前页面有效一旦关闭就会被释放。也不会随浏览器发送给服务器。
• 每个域名有5M大小的存储
• 可以存储的内容有：数组、json数据、图片、脚本、样式文件（只要可以转换成字符串的均可以存储）

2.使用注意事项：

• 使用前要判断浏览器是否支持
• 写数据的时候，需要异常处理，避免超出容量抛错
• 避免把敏感信息存入localstorage
• key的唯一性

3.使用限制：

• 存储更新策略，过期控制
• 子域名之间不能共享存储数据
• 超出存储大小之后如何存储（LRU、FIFO）
• 服务器端如何取到

4.使用场景

• 利用本地数据，减少网络传输
• 弱网络环境下，高延迟，低带宽，尽量把数据本地化

5.操作

localStorage和sessionStorage都继承于Storage，提供了统一的api来访问和设置数据。api列表为：

• clear 清空存储中的所有本地存储数据
• getItem 接受一个参数key，获取对应key的本地存储
• key 接受一个整数索引，返回对应本地存储中索引的键
• removeItem 接受一个参数key，删除对应本地存储的key
• setItem 接受两个参数，key和value，如果不存在则添加，存在则更新。

四、H5浏览器数据库IndexedDB

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

五、H5离线缓存-application cache

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

//检测是否在线API
navigator.online
//返回true即有线状态，返回false即离线状态

缺点：

• 第一次要更改manifest文件，因此第二次刷新才会更新app cache
• 每次都要全部拉取mainfest的文件
• 含有manifest属性的当前请求页无论如何都会被缓存
• 对于链接的参数变化时敏感的，任何一个参数的修改都会被（master）重新缓存（重复缓存含参页面）index.html和index.html?renew=1会被认为是不同文件，分别缓存

优势：

• 完全离线
• 资源被缓存，加载更快
• 降低服务端负载

使用场景

• 单地址页面
• 对实时性要求不高的业务
• 离线webapp