localstorage、sessionstorage、indexedDB的特点和应用场景

什么样的数据应该保存在本地存储中呢？有以下几个原则：

只保存重要页面的重要数据典型的，首页首屏对业务庞大的站点，这点尤其重要

极大提高用户体验的数据比如表单的状态，可以提交之前保存，当用户刷新页面时可以还原静态资源，比如 js 和 css

一个请求一个 key 值（一个 cgi 一个 key 值）避免请求链接加参数的 key ([http://request-ajax.cgi[params])，这样必然让](http://request-ajax.[params]%29%2C-yt23ad46hp37ay91hqrra/) key 值趋于冗余从而撑爆空间

1. cookie

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数据+l。

特点异步。它的数据不是保存在表中，而是保存在对象存储空间中。创建对象存储空间时，需要定义一个键，然后就可以添加数据。可以使用游标在对象存储空间中查询特定的对象。而索引则是为了提高查询速度而基于特定的属性创建的。说明：indexDB 目前兼容性还不是很好

------------END-----------