• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

互联网 diligentman 2周前 (11-18) 9次浏览

一 目录

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

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

二 前言

返回目录

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

浏览器的本地存储主要分为 CookieWeb StorageIndexedDB

Web Storage 分为 Local StorageSession 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 StorageSession Storage,下面我们一一了解学习。

4.1 Local Storage

返回目录

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

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

相比 Cookie 优势:

  1. 容量。体积上线 5M,大于 Cookie4kb
  2. 只存在客户端。不参与和服务端的通讯,避免 Cookie 的性能缺陷和安全缺陷。
  3. 接口封装。有 setItemgetItem 两个 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 国际 许可协议 进行许可。<br/>基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/>本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。


喜欢 (0)