本文共 2422 字，大约阅读时间需要 8 分钟。
一 概述
Local Storage，Session Storage，IndexedDB，Web SQL，Cookies都是浏览器中具有实现前端本地存储功能的介质。在提到过Web SQL Database实际上已经被废弃，而HTML5的支持的本地存储实际上变成了（Local Storage和Session Storage）与IndexedDB。Web Storage使用简单字符串键值对在本地存储数据，方便灵活，但是对于大量结构化数据存储比较难处理，IndexedDB是为了能够在客户端存储大量的结构化数据，并且使用索引高效检索的API。
二 Cookie
Cookie数据始终在同源的Http请求中携带（即使不需要），在HttpRequest和HttpResponse的Header中实现浏览器和服务器间来回传递，最后保存在客户端，这样需要占用一些流量，同时Cookie数据还有path属性，可以限制Cookie只属于该路径下，且Cookie大小不能超过4k，所以Cookie只是适合保存较小的数据，如回话标识，用户登录信息，网站记住密码的功能通常是通过在Cookie中保存一段辨别用户身份的数据来实现。值得注意的是由于Cookie在Http协议请求中是以明文方式传递的（Https协议请求中不是），所以存在一定的安全性问题。此外Cookie只在设置的过期时间之前有效，即使窗口或者浏览器关闭，此外在所有同源的浏览器窗口可以实现Cookie的共享。
三 Local Storage&Session Storage
Local Storage与Session Storage是Web Storage提供的两种API，是HTML5中新增的本地同源存储解决方案之一，都是一种前端客户端本地存储慨念。
Local Storage是可以永久保存在浏览器本地，即使浏览器窗口或者浏览器关闭也不会被清除，除非显式的清除，所以用作客户端持久化数据，同时数据可以在所有同源窗口进行共享。其中数据不参与和服务器之间的通信，一般可以保存5M大小的数据。
Session Storage是会话级别的存储，用于本地存储会话（session）数据，且存储的数据只是在当前浏览器窗口的同一个会话页面有效，会话结束后数据也会随之销毁，所以不能进行持久化存储，且数据不会在浏览器窗口进行共享，即使是不同窗口的相同页面。其中数据不参与和服务器之间的通信，一般可以保存5M大小的数据。
四 Cookie&Local Storage&Session Storage之间比较
| 特性 | Cookie | Local Storage | Session Storage |
|---|---|---|---|
| 数据的生命期 | 可设置失效时间，默认是关闭浏览器后失效 | 除非被显式清除，否则永久保存 | 会话级存储，仅在当前会话下有效，会话结束，关闭页面或浏览器后被清除 |
| 存放数据大小 | 4KB左右 | 5MB~10MB(浏览器不同，情况不同) | 5MB~10MB(浏览器不同，情况不同) |
| 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能和安全问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 |
| 易用性 | 源生的Cookie接口不友好，开发者需要根据需求封装 | 源生接口良好，亦可再次封装来对Object和Array有更好的支持 | 源生接口良好，亦可再次封装来对Object和Array有更好的支持 |
| 应用场景 | 用户登录时，保存服务器返回的一段加密过的唯一辨识单一用户的code，用以判断当前用户登录状态，或者之前电商网站用来保存用户的购物车信息。 | Local Storage可以替代Cookie完成用户购物车信息的前端保存功能，同时可以当作HTML5游戏的本地数据的存储空间。 | 当页面存在多表单的情况下，可以利用Session Storage实现表单页拆分，优化用户体验。 |
| 注意 | 不要将系统敏感的数据保存到Cookie，Local Storage，Session Storage中，防止XSS注入的风险。因为XSS注入可以通过控制台对你的属性值进行修改。 | ||
五 IndexedDB
如Cookies，Local Storage，Session Storage都是浏览器端的数据存储方案，但是不适合大量数据的存储，而且不提供搜索功能，不能建立自定的索引。而IndexedDB就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。它可以存储大量数据，提供了查找接口，能够建立索引。但是不属于关系型数据库（不支持SQL查询语句，更类似于NoSQL数据库）。
IndexedDB的特点：
- 键值对存储：IndexedDB内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括JavaScript对象。对象仓库中，数据以“键值对”的形式保存。每一个数据记录都有对应的主键，主键是唯一的，如果重复会抛出一个错误。
- 异步：IndexedDB操作不会锁死浏览器，用户依然可以进行其他操作，与Local Storage的同步操作不同，异步的设计是为了大量数据的读写，拖慢页面的表现，降低用户体验。
- 支持事务：IndexedDB支持事务（transaction）,这意味着一些列操作步骤中，只要有某个步骤出现异常，则整个事务就会消失，数据库回滚到事务发生之前的状态，不存在只写一部分数据的情况。
- 同源限制：IndexedDB受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能够访问跨域的IndexedDB数据库。
- 存储空间大：IndexedDB的存储空间一般不少于250MB，或者更大。
- 支持二进制存储：IndexedDB不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer对象和Blob对象）。
参考资料：
转载地址：http://zgsiz.baihongyu.com/