jsliang 求职系列 - 18 - 本地存储浏览器存储是面试中较为基础的知识点，面试中提问频率中等偏下，往往 5/6

一目录

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

目录
一目录
二前言
三 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 点：

Cookie
Local Storage
Session Storage
IndexedDB

啪，上手很快呀！

三 Cookie

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

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" + "过期时间" + 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 求职系列 - 18 - 本地存储

一 目录

二 前言