Javascript本地存储的⽅式有哪些？区别及应⽤场景？

---

前言

javaScript 本地存储（也称本地缓存）的⽅法我们主要讲述以下四种：

• cookie
• sessionStorage
• localStorage
• indexedDB

---

一、cookie

Cookie ，类型为「⼩型⽂本⽂件」，指某些⽹站为了辨别⽤户身份⽽储存在⽤户本地终端上的数据。 是为了解决 HTTP ⽆状态导致的问题。

作为⼀段⼀般不超过 4KB 的⼩型⽂本数据，它由⼀个名称（Name）、⼀个值（Value）和其它⼏个⽤于控制 cookie 有效期、安全性、使⽤范围的可选属性组成。

但是 cookie 在每次请求中都会被发送，如果不使⽤ HTTPS 并对其加密，其保存的信息很容易被窃取，导致安全⻛险。举个例⼦，在⼀些使⽤ cookie 保持登录态的⽹站上，如果 cookie 被窃取，他⼈很容
易利⽤你的 cookie 来假扮成你登录⽹站。

关于 cookie 常⽤的属性：

• Expires ⽤于设置 Cookie 的过期时间

Expires=Wed, 21 Oct 2015 07:28:00 GMT

• Max-Age ⽤于设置在 Cookie 失效之前需要经过的秒数（优先级⽐ Expires ⾼）

Max-Age=604800

• Domain 指定了 Cookie 可以送达的主机名
  Path 指定了⼀个 URL 路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie ⾸部

 Path=/docs # /docs/Web/ 下的资源会带 Cookie ⾸部

• 标记为 Secure 的 Cookie 只应通过被 HTTPS 协议加密过的请求发送给服务端

通过上述，我们可以看到 cookie ⼜开始的作⽤并不是为了缓存⽽设计出来，只是借⽤了 cookie 的特性实现缓存。

关于 cookie 的使用：

document.cookie = '名字=值';

关于 cookie 的修改，⾸先要确定 domain 和 path 属性都是相同的才可以，其中有⼀个不同得时候都会创建出⼀个新的 cookie。

Set-Cookie:name=aa; domain=aa.net; path=/ # 服务端设置
document.cookie =name=bb; domain=aa.net; path=/ # 客户端设置

最后 cookie 的删除，最常⽤的⽅法就是给 cookie 设置⼀个过期的事件，这样 cookie 过期后会被浏览器删除。

二、localStorage

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

特点：

• ⽣命周期：持久化的本地存储，除⾮主动删除数据，否则数据是永远不会过期的
• 存储的信息在同⼀域中是共享的
• 当本⻚操作（新增、修改、删除）了 localStorage 的时候，本⻚⾯不会触发 storage 事件,但是别的⻚⾯会触发 storage 事件。
• ⼤⼩：5M（跟浏览器⼚商有关系）
• localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致⻚⾯变卡受同源策略的限制。

关于localStorage 的使用

• 设置

localStorage.setItem('username','cfangxu');

• 获取

localStorage.getItem('username');

• 获取键名

localStorage.key(0) //获取第⼀个键名;

• 删除

localStorage.removeItem('username');

• ⼀次性清除所有存储

localStorage.clear();

localStorage 也不是完美的，它有两个缺点：

• ⽆法像 Cookie ⼀样设置过期时间
• 只能存⼊字符串，⽆法直接存对象

localStorage.setItem('key', {name: 'value'});
console.log(localStorage.getItem('key')); // '[object, Object]'

三、sessionStorage

sessionStorage 和 localStorage 使⽤⽅法基本⼀致，唯⼀不同的是⽣命周期，⼀旦⻚⾯（会话）关闭， sessionStorage 将会删除数据。

四、扩展的前端存储⽅式

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

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

优点：

• 储存量理论上没有上限
• 所有操作都是异步的，相⽐ LocalStorage 同步操作性能更⾼，尤其是数据量较⼤时
• 原⽣⽀持储存 JS 的对象
• 是个正经的数据库，意味着数据库能⼲的事它都能⼲

缺点：

• 操作⾮常繁琐
• 本身有⼀定⻔槛

关于 indexedDB 的使⽤基本使⽤步骤如下：

• 打开数据库并且开始⼀个事务
• 创建⼀个 object store
• 构建⼀个请求来执⾏⼀些数据库操作，像增加或提取数据等。
• 通过监听正确类型的 DOM 事件以等待操作完成。
• 在操作结果上进⾏⼀些操作（可以在 request 对象中找到）

关于使⽤ indexdb 的使⽤会⽐较繁琐，⼤家可以通过使⽤ Godb.js 库进⾏缓存，最⼤化的降低操作难度。

---

五、总结

一、区别

关于 cookie 、 sessionStorage 、 localStorage 三者的区别主要如下：

• 存储⼤⼩：
  cookie 数据⼤⼩不能超过 4k ， sessionStorage 和localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得多，可以达到5M或更⼤

• 有效时间：
  localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据；sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除； cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭

• 数据与服务器之间的交互⽅式， cookie 的数据会⾃动的传递到服务器，服务器端也可以写cookie 到客户端； sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存

二、应⽤场景

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

• 标记⽤户与跟踪⽤户⾏为的情况，推荐使⽤ cookie
• 适合⻓期保存在本地的数据（令牌），推荐使⽤ localStorage
• 敏感账号⼀次性登录，推荐使⽤ sessionStorage
• 存储⼤量数据的情况、在线⽂档（富⽂本编辑器）保存编辑历史的情况，推荐使⽤ indexedDB

---

如果有什么补充的，欢迎在评论区留言！