浏览器本地存储

[conan1992]

cookie

Cookie 最开始被设计出来其实并不是来做本地存储的，而是为了弥补HTTP在状态管理上的不足。

缺点：

• 容量：上限4kb
• 性能：同一个域名下请求都会带上cookie，请求书的增多会造成不必要的浪费；
• 安全：
  • cookie以纯文本的方式在浏览器和服务端之间传递，容易被截获篡改
  • HttpOnly为 false 的情况下，Cookie 信息能直接通过 JS 脚本来读取

localStorage

同一个域名下，会存储相同的一段localStorage

• 容量：容量上限为5M，针对一个域名
• 只存在客户端，默认不参与与服务端的通信。这样就很好地避免了 Cookie 带来的性能问题和安全问题。
• 接口封装。通过localStorage暴露在全局，并通过它的 setItem 和 getItem等方法进行操作，非常方便
• 存储的都是字符串

应用

• 利用localStorage的较大容量和持久特性，可以利用localStorage存储一些内容稳定的资源，比如官网的logo，存储Base64格式的图片资源，因此利用localStorage

sessionStorage

localStorage有的都有，区别在于sessionStorage是会话级别的存储，并不是持久化存储。会话结束，也就是页面关闭，这部分sessionStorage就不复存在了

应用：

• 可以用它对表单信息进行维护，将表单信息存储在里面，可以保证页面即使刷新也不会让之前的表单信息丢失。
• 可以用它存储本次浏览记录。如果关闭页面后不需要这些记录，用sessionStorage就再合适不过了。事实上微博就采取了这样的存储方式。

indexDB

运行在浏览器中的非关系型数据库, 本质上是数据库，绝不是和刚才WebStorage的 5M 一个量级，理论上这个容量是没有上限的

参考

• 能不能说一说浏览器的本地存储？各自优劣如何