一 目录
不折腾的前端，和咸鱼有什么区别
| 目录 |
|---|
| 一 目录 |
| 二 前言 |
| 三 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 点：
CookieLocal StorageSession StorageIndexedDB
啪，上手很快呀！
三 Cookie
Cookie 最开始被设计出来其实并不是来做本地存储的，而是为了弥补 HTTP 在状态管理上的不足。
HTTP是无状态的，即它不会记住用户的操作，这让我们在记住用户状态等场景被限制，所以有了Cookie
Cookie 本质上就是浏览器里面存储的一个很小的文本文件，内部以键值对的方式来存储。
向同一个域名下发送请求，都会携带相同的 Cookie，服务器拿到 Cookie 进行解析，便能拿到客户端的状态。
缺陷：
- 容量缺陷。体积上线
4kb，只能存储少量信息。 - 性能缺陷。
Cookie请求每次都会携带上完整的Cookie，随着请求数增多，造成性能浪费。 - 安全缺陷。以纯文本的形式在浏览器和服务器中传递，容易被非法截获和篡改。
四 Web Storage
Web Storage 分为 Local Storage 和 Session Storage，下面我们一一了解学习。
4.1 Local Storage
Local Storge 相对 Cookie 而言，它也是针对同一个域名。
同一个域名下，会存储相同的一段 Local Storage。
相比 Cookie 优势：
- 容量。体积上线
5M，大于Cookie的4kb。 - 只存在客户端。不参与和服务端的通讯，避免
Cookie的性能缺陷和安全缺陷。 - 接口封装。有
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当页面关闭的时候就不复存在了。
应用场景：
- 对表单信息做维护。用户刷新页面不丢失。
- 存储本次浏览记录。看过的页面不怕找不到。
五 IndexedDB
IndexedDB 是运行在浏览器中的 非关系型数据库。
因为本质上是数据库，所以一般来说容量是没有上线的。
但是目前还没有尝试一番，所以这里就不哆嗦了。
六 token
最后我们补充一下 token 知识。
众所周知，HTTP 是无状态协议，即它对于交互性场景没有记忆能力。
但是，如果碰到某些场景，就有点无奈了：
- 输入账号密码进行登录
- 将商品加入购物车
- 点击支付，发现用户要重新登录
这种情况是不是就束手无策了？
不，我们还可以通过 token 来维持用户的登录态：
用户 id + 过期时间 + SecretKey
"用户 id" + "过期时间" + SHA1("用户 id" + "用户口令" + "过期时间" + "SecretKey")
这样，当浏览器发送请求给服务器，token 会通过 cookie 等形式将上面实例内容传输给服务器。
服务器拿到数据后，根据用户 id 查找用户口令，并进一步计算是否已过期，从而判断用户是否需要重新登录。
需要重新登录则跳转到登录页面，不需要重新登录则进行支付流程。
七 参考文献
- cookie、Session、Token、sessionStorage、localStorage简介【阅读建议：5min】
- session,cookie,sessionStorage,localStorage,token的区别？【阅读建议：5min】
- 什么是Http无状态？Session、Cookie、Token三者之间的区别【阅读建议：5min】
- Session是怎么实现的？存储在哪里？【阅读建议：5min】
- 用户登录，前后端如何交互判断是否登录超时！【阅读建议：5min】
- 前后端分离模式下，如何跟踪用户状态？【阅读建议：5min】
jsliang 的文档库由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。
基于 github.com/LiangJunron… 上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。
