jsliang 求职系列 - 18 - 本地存储

一 目录

不折腾的前端，和咸鱼有什么区别

目录
一 目录
二 前言
三 Cookie
四 Web Storage
4.1 Local Storage
4.2 Session Storage
五 IndexedDB
六 token
七 参考文献

二 前言

返回目录

浏览器存储是面试中较为基础的知识点，面试中提问频率中等偏下，往往 5/6 家会有 1 家出一道缓存题。

浏览器的本地存储主要分为 Cookie、Web Storage 和 IndexedDB。

而 Web Storage 分为 Local Storage 和 Session Storage。

所以本篇介绍内容为 4 点：

1. Cookie
2. Local Storage
3. Session Storage
4. IndexedDB

啪，上手很快呀！

三 Cookie

返回目录

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

HTTP 是无状态的，即它不会记住用户的操作，这让我们在记住用户状态等场景被限制，所以有了 Cookie

Cookie 本质上就是浏览器里面存储的一个很小的文本文件，内部以键值对的方式来存储。

向同一个域名下发送请求，都会携带相同的 Cookie，服务器拿到 Cookie 进行解析，便能拿到客户端的状态。

缺陷：

1. 容量缺陷。体积上线 4kb，只能存储少量信息。
2. 性能缺陷。Cookie 请求每次都会携带上完整的 Cookie，随着请求数增多，造成性能浪费。
3. 安全缺陷。以纯文本的形式在浏览器和服务器中传递，容易被非法截获和篡改。

四 Web Storage

返回目录

Web Storage 分为 Local Storage 和 Session Storage，下面我们一一了解学习。

4.1 Local Storage

返回目录

Local Storge 相对 Cookie 而言，它也是针对同一个域名。

同一个域名下，会存储相同的一段 Local Storage。

相比 Cookie 优势：

1. 容量。体积上线 5M，大于 Cookie 的 4kb。
2. 只存在客户端。不参与和服务端的通讯，避免 Cookie 的性能缺陷和安全缺陷。
3. 接口封装。有 setItem 和 getItem 两个 API 接口。

设置：

localStorage.setItem("name", "jsliang"); 

let obj = { name: "jsliang", age: 18 };
localStorage.setItem("info", JSON.stringify(obj));

取值：

let name = localStorage.getItem("name");
let info = JSON.parse(localStorage.getItem("info"));

应用场景：

• 以 Base64 方式存储官方 Logo 等图片。

4.2 Session Storage

返回目录

基本上和 Local Stoarge 一致。

相比较上的不同：

• 会话级别的存储。不同于 Local Storage 的持续化存储，Session Storage 当页面关闭的时候就不复存在了。

应用场景：

1. 对表单信息做维护。用户刷新页面不丢失。
2. 存储本次浏览记录。看过的页面不怕找不到。

五 IndexedDB

返回目录

IndexedDB 是运行在浏览器中的 非关系型数据库。

因为本质上是数据库，所以一般来说容量是没有上线的。

但是目前还没有尝试一番，所以这里就不哆嗦了。

六 token

返回目录

最后我们补充一下 token 知识。

众所周知，HTTP 是无状态协议，即它对于交互性场景没有记忆能力。

但是，如果碰到某些场景，就有点无奈了：

1. 输入账号密码进行登录
2. 将商品加入购物车
3. 点击支付，发现用户要重新登录

这种情况是不是就束手无策了？

不，我们还可以通过 token 来维持用户的登录态：

用户 id + 过期时间 + SecretKey

"用户 id" + "过期时间" + SHA1("用户 id" + "用户口令" + "过期时间" + "SecretKey")

这样，当浏览器发送请求给服务器，token 会通过 cookie 等形式将上面实例内容传输给服务器。

服务器拿到数据后，根据用户 id 查找用户口令，并进一步计算是否已过期，从而判断用户是否需要重新登录。

需要重新登录则跳转到登录页面，不需要重新登录则进行支付流程。

七 参考文献

返回目录

• [x] cookie、Session、Token、sessionStorage、localStorage简介【阅读建议：5min】
• [x] session,cookie,sessionStorage,localStorage,token的区别？【阅读建议：5min】
• [x] 什么是Http无状态？Session、Cookie、Token三者之间的区别【阅读建议：5min】
• [x] Session是怎么实现的？存储在哪里？【阅读建议：5min】
• [x] 用户登录，前后端如何交互判断是否登录超时！【阅读建议：5min】
• [x] 前后端分离模式下，如何跟踪用户状态？【阅读建议：5min】

---

jsliang 的文档库由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。
基于 https://github.com/LiangJunrong/document-library 上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。