关于 Web 你需要知道的存储的 3 种方法

Cookie

cookie 定义

Cookie 是客户端存储数据的选项之一，它主要用于客户端存储会话信息。

它是由服务器在响应 HTTP 请求时，通过发送 Set-Cookie HTTP 头部包含的会话信息。

浏览器将会话信息存储起来，并在之后的每一个请求中携带 Cookie 数据返回给 服务器，来做唯一标识通信。

cookie 限制

cookie 通常 遵循的限制规则：

• 不能超过 300 个 Cookie

• 每个 Cookie 不能超过 4096 字节

• 每个域不能超过 20 个 Cookie

• 每个域不能超过 81920 字节

如果 Cookie 总数超过了 单个域的 上限，浏览器会删除之前的 Cookie。

不同浏览器表现不一样

• IE 和 Opera 会按照最近最少使用的原则删除之前的 Cookie.

• Firefoxs 随机删除之前的 Cookie

如果创建的 Cookie 字节超过了最大限制，则 Cookie 会被删除。

cookie 构成

cookie 缺点

• 容量问题：有上限，最大只能有 4KB

• 性能问题：同一个域名下的所有请求，都会携带 Cookie，某些请求（a,img,link 等标签发出的请求）可能不需要此 cookie，会加大传输的头部，损耗一定时空开销

• 安全问题：客户端可以通过一定手段（脚本，devtools，本地存储的文件，修改 host 文件）获取到，存在 XSS,CSRF 等安全问题

cookie 解决安全问题的方案

• 减短 cookie 的有效时间

• 添加 HttpOnly 属性：防止本地脚本读取 cookie

• 服务端对传送的 cookie 加密

• 添加 Secure 属性：使用 https 协议传输

• 设置 samesite 属性为需要的值：严格卡控 cookie 的携带范围

Web Stronge

Web Stronge 的出现 主要是解决 cookie 的问题，存储不需要频繁发送服务端的数据。

它提供了 跨会话 持久化存储大量数据的机制。

Web Stronge 中 定义了两个对象

• localStronge 本地永久存储

• sessionStronge 本地会话存储

Web Stronge 提供的 方法

Web Stronge 优点

• 存储容量大:不同浏览器，存储容量可以达到 5-10M，针对一个域名

• 存储于客户端，不会服务端发生通信

Web Stronge 缺点

• 只能存储字符串，JSON 对象需要转换为 json string 存储

• 只适用于存储少量简单数据

• localStorage 需要手动删除

sessionStronge

sessionStronge 对象只存储会话数据，当页面关闭时，意味着会话结束，那么数据会清空。当页面 刷新 / 崩溃 时，数据还会保存在浏览器中。

使用 sessionStronge

// 设置会话key-value// 属性存储数据sessionStorage.name = data// 方法存储数据sessionStorage.setItem('title', '测试'）                                               // 获取指定name值sessionStorage.getItem('name')​​​// 删除会话数据// 删除所有sessionStrongesessionStorage.clear// 删除指定keysessionStorage.removeItem('name'）                                                    // 获取sessionStronge 个数sessionStorage.length

localStronge

本地数据持久化，永久的保存在浏览器中，除非主动删除。

由于它 是 Stronge 的实例， 它拥有 Stronge 所有的方法，用法和 sessionStronge 一样。

IndexedDB

IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法。`IndexedDB` 为生成 Web Application 提供了丰富的查询能力，使我们的应用在在线和离线时都可以正常工作。它 依旧受同源策略限制，运行在浏览器上的非关系型数据库 NoSQL。

本文将不讲述了，日常开发用的少。

IndexedDB 学习资源

• [使用 IndexedDB] : https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB
  

• [浏览器数据库 IndexedDB 入门教程] : http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
  

参考文献

• 《JavaScript 高级程序设计第四版》

• MDN 资源

最后

写作不易，如果文章学到了，点个赞👍👍👍关注，支持一下！