几种前端数据存储方式（记录）

大家好，欢迎来到IT知识分享网。

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。

IndexedDB 具有以下特点。
key/value的存储方式：IndexedDB和localStorage的存储方式很类似，都是通过一个key对应一个value，而且key是唯一的方式进行存储的，但是indexedDB和localStorage有很不一样的一点，就是可以直接存储对象数组等，不需要想localStorage那样必须转为字符串。
异步调用：IndexedDB是使用异步调用的，当我们存储一个较大的数据时，不会因为写入数据慢而导致页面阻塞。
支持事务：IndexedDB支持事务，如果有用过mysql和mongoDB的人就很清楚了，能确保我们多个操作只要其中一步出现问题，可以整体回滚。
同源限制：IndexedDB和localStorage一样，都是有同源策略的问题，不能跨协议、端口、域名使用。
储存空间：IndexedDB我认为最最最大的优势在于存储空间相比localStorage要大得多，一般来说不少于250MB。
支持二进制：IndexedDB不但可以存储对象，字符串等，还可以存储二进制数据。

什么场景下使用:
在PC的Chorme中是可以存到localStorage的，但是在IOS中，却报出空间不足，无法放入localStorage中，所以这个时候就是使用indexedDB了！因为indexedDB的空间大得我可以完全不去考虑数据大小，而且还能直接以对象的形式存入，无需转为JSON字符串。大大减少了转换的运算。但是因为使用indexedDB和使用localStorage是完全不一样的，基本上都是异步操作而且还要考虑一些低版本的手机可能不支持的情况，所以要封装中间件，同样的调用，根据设备对indexedDB的兼容情况，自动决定使用indexedDB还是localStorage。最终完成需求，并且优化前后达到超过70%的优化率，页面的渲染基本秒开。
大部分主流程的浏览器其实都已经兼容了indexedDB