在前端开发中，偶尔需要存储一些如： 用户信息、登录状态、历史记录等常量数据。用于后续二次调用，并且避免刷新后丢失。这时，就需要用到本地存储了。

在JavaScript 中，提供了四种可用的本地存储方式： cookie ，sessionStorage， localStorage， indexedDB （ 已废除的 WebSQL ）。

Cookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决 HTTP 无状态导致的问题。

作为一段一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和 其它几个用于控制 cookie 有效期、安全性、使用范围 的可选属性组成，以键值对的形式存储到本地。

但是cookie在每次请求中都会被发送，如果不使用 HTTPS 并对其加密，其保存的信息很容易被窃取，导致安全风险。举个例子，在一些使用 cookie 保持登录态的网站上，如果 cookie 被窃取，他人很容易利用你的 cookie 来假扮成你登录网站，所以需要对 Cookie 进行加密。

HTML5 新方法，IE8 及以上浏览器都兼容。

特点：

生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

存储的信息在同一域中是共享的。

当本页操作（新增、修改、删除）了 localStorage 的时候，本页面不会触发 storage 事件, 但是别的页面会触发 storage 事件。

大小：5M（跟浏览器厂商有关系）

localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

受同源策略的限制

sessionStorage 和 localStorage 使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭， sessionStorage 将会删除数据。

indexedDB 是一种低级API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API 使用索引来实现对该数据的高性能搜索

虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。IndexedDB提供了一个解决方案

优点：

储存量理论上没有上限

所有操作都是异步的，相比 LocalStorage 同步操作性能更高，尤其是数据量较大时

原生支持储存JS的对象

是个正经的数据库，意味着数据库能干的事它都能干

缺点：

操作非常繁琐

本身有一定门槛

在了解了上述的前端的缓存方式后，我们可以看看针对不对场景的使用选择：