对于本地存储空间，在各主流浏览器（包含PC、移动端）竟然惊人的一致，都是 5M 的数量级。当本地存储空间大于5M时，各浏览器都是抛出一个错误 QUOTA_EXCEEDED_ERR 。
那么什么样的数据应该保存在本地存储中呢？有以下几个原则：

  1. 只保存重要页面的重要数据
    典型的，首页首屏
    对业务庞大的站点，这点尤其重要
  2. 极大提高用户体验的数据
    比如表单的状态，可以提交之前保存，当用户刷新页面时可以还原
    静态资源，比如 js 和 css
  3. 一个请求一个 key 值（一个 cgi 一个 key 值）
    避免请求链接加参数的 key (http://request-ajax.cgi[params])，这样必然让 key 值趋于冗余从而撑爆空间
  • cookie生成
    cookie是存在客户端，session存在服务器端。在cookie当用户第一次访问网页时，服务器会给客户端返回一个cookie，在cookie中保存着服务器端session文件的位置信息，用户第一次访问服务器，服务器就会为它创建一个session文件，并将session的标识保存在cookie中发给它。
    在这之后，通过为每个请求添加 Cookie HTTP 头将信息发送回服务器。
  • cookie访问和设置
    在 JavaScript 中可以通过 document.cookie 设置字段和进行访问。
  • cookie优点
    Cookie的大小为4kb。
    cookie主要应用在保存用户身份信息。

2. localstorage

  • localStorage介绍：
    和cookie很类似，但是localStorage的大小有5M；不需要被发送到服务端。还有一个区别localStorage存储的数据是永久性的，其作用域限定在文档源级别（只要URL的协议、端口、主机名三者中有一个不同，就属于不同的文档源）。除此之外，localStorage也受浏览器供应商限制，如果使用chrome访问一个网站，下次用firefox再次访问是获取不到上次存储的数据的。
  • localstorage特点：
    页面数据同步
  • 好处
    localStorage 只能做为提升用户体验的手段，而不能成为客户端逻辑的可靠的、唯一的依赖。
    方便网页的加载，避免取回数据前页面一片空白，如果不需要最新数据也可以减少向服务端请求的次数，从而减少用户等待从服务器获取数据的时间；
    网络状态不佳时仍可以显示离线数据。
  • 访问限制
    只有当前设定localstorage的域下才能访问； 单标签页：两个tab（相同域）之间不能互通； 刷新或新开 tab 是可以访问到的，关闭浏览器重新打开原先tab也可访问。
  • localStorage应用：
    存储一些需要刷新保存并且需要在页面关闭后仍然留下的信息。
    可以用于保存购物车中的内容；在之前项目中，用于保存上一次的用户浏览标签，并跳转到相应的路径下。
  • localstorage注意事项：
    因为性能问题，不能过于依赖 JSON.stringify。value 尽量使用 string。
    如果需要多次写入localstorage，尽量一次性写入。
    localstorage是同步执行，可能会阻塞UI

3. sessionstorage

sessionStorage：sessionStorage的有效期仅存在于浏览器的标签页。也就是说如果关闭标签页后，通过sessionStorage存储的数据就都被删除了。sessionStorage的作用域不仅被限制在文档源，还被限定在窗口中，也就是同一标签页中。注意，这里说的窗口是指顶级窗口，如果同一标签页中包含多个

  • 访问限制
    只有当前设定sessionStorage的域下才能访问； 单标签页：两个tab（相同域）之间不能互通； 在新开的tab下或者关闭本tab之后再打开，也不能访问之前写下的sessionStorage； 刷新本tab可以访问。
  • 应用场景
    存储一些当前页面刷新需要存储，且不需要在tab关闭时候留下的信息。
    可以用来检测用户是否是刷新进入的页面，如音乐播放器恢复播放进度条的功能。 非常适合单页应用程序，可以方便在各业务模块进行传值。

4. cookie和web storage的区别

Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

5. IndexDB

websql 像关系型数据库，使用 sql 语句进行操作。 indexdb 像 nosql，直接使用 js 方法操作数据。

  • 访问：
    indexdb与 web storage 一致，均是在创建数据库的域名下才能访问。且不能指定访问域名。
  • 存储时间：
    存储时间永久，除非用户清除数据，可以用作长效的存储。
  • 大小限制：
    理论上讲，这种存储的方式是没有大小限制的。然而IndexDB的数据库超过50M的时候浏览器会弹出确认。基本上也相当于没有限制了。
  • 性能测试：
    indexeddb查询少量数据花费差不多20MS左右。大量数据的情况下，相对耗时会变长一些，但是也就在30MS左右，也是相当给力了，10W数据+，毕竟nosql。
  • 特点
    异步。
    它的数据不是保存在表中，而是保存在对象存储空间中。 创建对象存储空间时，需要定义一个键，然后就可以添加数据。 可以使用游标在对象存储空间中查询特定的对象。 而索引则是为了提高查询速度而基于特定的属性创建的。 说明：indexDB 目前兼容性还不是很好