＜ 今日份知识点：Javascript本地存储的方式有哪些？区别及应用场景？ ＞

---

一、为什么使用本地存储？

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

在JavaScript 中，提供了四种可用的本地存储方式： cookie ，sessionStorage， localStorage， indexedDB （ 已废除的 WebSQL ）。四种方式各有千秋，接下来，就由小温带各位卷王了解一下，Javascript 中的本地存储吧

二、Javascript本地存储位置

应用（ 控制台 Application 模块 ）

三、Javascript本地存储的方式

① cookie

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

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

但是cookie在每次请求中都会被发送，如果不使用 HTTPS 并对其加密，其保存的信息很容易被窃取，导致安全风险。举个例子，在一些使用 cookie 保持登录态的网站上，如果 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 也并非完美，它有两个缺点：

1. 无法像Cookie一样设置过期时间
2. 只能存入字符串，无法直接存对象。可以借助 JSON.stringify() 存入， 配合 JSON.parse() 拿出解析。

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

localStorage.setItem('key_1', JSON.stringify({name: 'value'}));
console.log(JSON.parse(localStorage.getItem('key_1'))); // '{name: 'value'}'

但是，这么做有一个缺点，那就是 JSON.stringify() 本身是存在一些问题的，具体问题可查阅百度 或 跳转 参考文献阅读。

③ sessionStorage

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

④ indexedDB

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

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

优点：

• 储存量理论上没有上限
• 所有操作都是异步的，相比 LocalStorage 同步操作性能更高，尤其是数据量较大时
• 原生支持储存JS的对象
• 是个正经的数据库，意味着数据库能干的事它都能干

缺点：

• 操作非常繁琐
• 本身有一定门槛

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

1. 打开数据库并且开始一个事务

2. 创建一个 object store

3. 构建一个请求来执行一些数据库操作，像增加或提取数据等。

4. 通过监听正确类型的 DOM 事件以等待操作完成。

5. 在操作结果上进行一些操作（可以在 request 对象中找到）

关于使用indexdb的使用会比较繁琐，大家可以通过使用 Godb.js 库进行缓存，最大化的降低操作难度。

四、存储方式的区别

名称	存储大小	有效时间	数据与服务器之间的交互方式	访问策略
cookie	数据大小不能超过4k	与设置的cookie过期时间有关，过期时间之前一直有效，即使窗口或浏览器关闭依然有效	cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端	符合同源策略可以访问
localStorage	一般为 5M，大小根据厂商不同有所差异（2.5 ~ 10 M 波动）	存储数据持久，浏览器关闭后数据不丢失除非主动删除数据，否则数据一直存在。	仅在本地保存，不与服务器交互	即使符合同源也不可以相互访问
sessionStorage	和 localStorage 一样	数据在当前浏览器窗口关闭后自动删除	仅在本地保存，不与服务器交互	符合同源策略可以访问
indexedDB	大于 250M	需手动更新 或 删除数据	仅在本地保存，不与服务器交互	符合同源策略可以访问

五、应用场景

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

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

---

参考文献

• 深入浅出前端本地储存
• 前端本地存储数据库IndexedDB完整教程

附录

• GoDB.js

往期内容

＜ 每日份知识快餐：axios是什么？如何在Vue中 封装 axios ？ ＞

＜ 在Vue中 el-popover + el-tiptap 实现 富文本框输入，表格点击展示 （富文本HTML标签渲染） ＞

＜ 知识拓展：CSS 中常用的计量单位有哪些？ ＞

＜ 面试知识点：什么是 Node.js ？有哪些优缺点？应用场景？ ＞