Cookie

维护浏览器和服务器端会话状态的一种方式，一般用于保存用户身份信息。

服务器端生成Cookie推送到浏览器端，浏览器负责保存和维护数据。

特点

域名下的所用请求都会带上Cookie

每条Cookie限制在4KB左右

Cookie在过期时间之前一直有效，若未设置过期时间，关闭浏览器窗口即失效

服务端通过响应头中的set-cookie向浏览器写入cookie，浏览器端可以通过document.cookie读写cookie（若一条Cookie在响应头中设置了HttpOnly标识，浏览器将无法获取和操作该条Cookie）

WebStorage

WebStorage —— 浏览器本地存储方案，包括SessionStorage和LocalStorage

两者的差异在存储周期上，使用方法上无差异

SessionStorage

限制在页面内的单次本地存储

特点

仅在当前页面有效

关闭页面或者浏览器窗口后失效

LocalStorage

限制在同源内的持久本地存储

特点

遵循同源策略

除非手动清除，否则一直保存在本地

共同特性

存储大小

一般存储空间为5MB左右，桌面端Chrome40+，FireFox34+，IE9+默认调整至10MB（本地测试结果与此相矛盾），部分浏览器可由用户手动调整上限。

StackOverflow – 关于计算LocalStorage上限

错误处理

同步读写，通过try…catch捕获错误信息。如下捕获超限错误

try {
  localStorage.setItem(data.name, JSON.stringify(data));
} catch(domException) {
  if (domException.name === 'QuotaExceededError' ||
      domException.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
    // Fallback code comes here.
  }
}

存储格式

数据以字符串格式存储，对象写入时需使用JSON.stringify转换为字符串，再使用JSON.parse转换为对象。

IndexedDB

大量数据的结构化存储

特点

遵循同源策略

除非手动清除，否则一直保存在本地

存储空间大，一般为250MB

主键对应值存储，比如以ID为主键存储对应数据

支持各类存储格式，甚至是二进制数据(Blob)

异步存储，禁止在页面reload时做批量存储

Web SQL

非官方规范，目前已弃用

Application Cache

应用缓存（又称 AppCache）可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮，您的应用也会正常加载和运行。

利用应用缓存，保证离线情况下正常使用，减少网络请求，加快访问速度

大部分浏览器对缓存数据容量的限制时5MB

应用缓存初级使用指南

简易说明

库

localForage – 封装IndexedDB, WebSQL, localStorage，提供统一API