在Web应用开发中，如何选择一个合适的Web存储方案呢？文章介绍了Cookie、WebStorage和IndexDB等常见的Web存储技术。包括它们的技术背景、原理和应用场景，理解这些知识将有助于我们制定更合理的Web方案。
一. Cookie
1. 技术背景
? Cookie解决了HTTP协议无状态的问题：即HTTP请求/响应本身不保存会话状态。对于交互式Web应用，会话状态一般会随着用户操作发生改变的。例如以下场景：
-
用户登录状态：当用户登录后，刷新或进入下一页面时，服务端如何判断当前请求的用户登录状态呢？
-
购物车：当用户选中商品后，进入下个页面继续购物时，服务端如何获取用户在上一页面选中的商品呢？
? 而Cookie就是解决HTTP协议无状态的一种方法。Cookie是存储在浏览器本地的数据，通过HTTP请求报文头传递到服务端。以上面的用户登录状态为例：
? 当用户登录后，服务端生成一个Cookie并返回给浏览器，浏览器下次请求时带上Cookie，这样服务端就可以通过Cookie信息判断用户登录状态。
PS：一般把真实信息存放在数据库，然后关联一个token存放到Cookie中。
2. 概念和应用场景
? Cookie是服务端返回给浏览器并保存在本地的数据，浏览器下次请求同一服务端时会携带Cookie传递给服务端。通常，它用于告知服务端两个请求是否来源于同一浏览器。
常见应用场景：
-
会话状态管理：用户登录状态和购物车功能。 -
跟踪用户操作行为。
3. 原理
? 当服务端接收到 HTTP 请求时，可以通过 Set-Cookie响应报文头设置Cookie信息。浏览器收到响应后会保存 Cookie，之后对该服务端的每一次请求都通过 Cookie请求报文头携带Cookie信息发送给服务端。
响应报文：
HTTP/1.0?200?OK
Content-type:?text/html
Set-Cookie:?yummy_cookie=choco
Set-Cookie:?tasty_cookie=strawberry
[页面内容]
请求报文：
GET?/sample_page.html?HTTP/1.1
Host:?www.example.org
Cookie:?yummy_cookie=choco;?tasty_cookie=strawberry
PS：浏览器端也可以通过document.cookie api读写cookie。
4. 生命周期
-
会话期 Cookie ：仅在会话期内有效，浏览器关闭之后它会被自动删除。不需要指定 Expires或Max-Age。 -
持久性 Cookie：在指定 Expires或Max-Age后才失效。
示例：
Set-Cookie:?id=a3fWa;?Expires=Wed,?21?Oct?2015?07:28:00?GMT;
5. 作用域
Domain 和 Path 定义了Cookie的作用域：即允许 Cookie 被发送给哪些URL。
不指定Domain时，默认是origin。
示例：
set-cookie:?token=123;?domain=.bing.com;path=/;
6. 安全属性
? 与Cookie相关的安全问题有：man-in-the-middle attack、XSS和CSRF，下面是对应的安全策略。
-
Secure：防止man-in-the-middle attack。
? Cookie通过HTTP报文在浏览器和服务端之间传输，有man-in-the-middle attack的风险。而 Secure 属性要求Cookie 只能被 HTTPS请求携带，从而保证Cookie的安全传输。
? 但是，只要能访问到客户端硬盘的人依然可以读取到Cookie。所以Cookie不应该携带敏感信息。
-
HttpOnly：防止XSS。
? HttpOnly属性表示不允许浏览器端脚本读写Cookie，这可以防止XSS（跨站脚本攻击）。
? PS：Cookie本职工作就是帮助服务端辨别请求来源的，对浏览器端程序应该是透明的，这种情况应该带上HttpOnly属性。
-
SameSite：防止
CSRF。SameSite有以下三个值：
-
None。浏览器在跨站请求下依然发送 cookies。 -
**
Strict。**限制浏览器只在访问相同站点时发送 cookie。（在Domain的基础上加强限制） -
Lax（默认值）。与Strict类似，但用户从外部站点导航至URL时（例如link）除外。
-
示例：
Set-Cookie:?id=a3fWa;?Expires=Wed,?21?Oct?2015?07:28:00?GMT;?Secure;?HttpOnly;SameSite=Strict
7. 局限性
-
Cookie不够大
? 浏览器对每个站点下的Cookie大小和数量都是有限制的。每个cookie的name=value的value值大概在4k。
-
额外的性能开销
? 由于服务器设置 Cookie 后，浏览器的每次请求都会携带 Cookie 数据，会带来额外的性能开销。
总结：Cookie的本职工作是维持HTTP状态，并不适合复杂的存储需求。
二. Web Storage
1. 技术背景
? 过去，Cookie作为惟一的浏览器端存储方案，存储容量小且带来了额外的性能开销，并不适合所有的存储需求。更多时候，我们需要的是一个单纯的客户端存储功能：即数据存储在浏览器端，而不需要在浏览器和服务端之间来回传递。例如实现以下功能：
-
用户搜索历史记录功能。 -
存储客户端配置信息。
? 现在，Web Storage提供了更专业的浏览器端存储方案。
2. 概念和原理
? Web Storage通过创建一个Storage对象来存储键值对，key和value是字符串格式。并且该Storage对象只保存在浏览器本地，不会通过HTTP请求传递给服务端。
示例：
//?1.存储值
localStorage.setItem("key","value");
//?2.获取值
var?valueLocal?=?localStorage.getItem("key");
//?3.删除值
Storage.removeItem("key");
//?4.清除Storage对象
Storage.clear();
//?5.Storage对象发送变化时，触发storage事件
window.addEventListener('storage',?function(e)?{
??document.querySelector('.my-storage').textContent?=?e.storageArea;
});
3. 生命周期
-
sessionStorage：Storage对象仅在页面会话期间有效。 -
localStorage：Storage对象是持久性的。在浏览器重新打开时依然有效。
4. 存储容量
Storage对象最大容量为5M左右。
5. 作用域
Web Storage的作用域为同一origin。其中sessionStorage只作用域当前页面，即便打开两个标签页访问同一页面，也会创建两个不同的Storage对象。
6. 应用场景
Web Storage的应用场景：
-
localStorage实现用户搜索历史记录功能。
image-20220123152526201 -
localStorage实现存储客户端配置信息。
image-20220123161351449 -
sessionStorage可以作为会话级别的缓存，例如表单信息存储，实现刷新页面不丢失表单数据。
三. IndexedDB
1. 技术背景
? 虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来是说力不从心的。而 IndexedDB 提供了这种场景的解决方案。
2. 概念和应用场景
? IndexedDB 是一个非关系型数据库，可以存储结构化克隆算法支持的任何对象（包括字符串、ArrayBuffer 对象和 Blob 对象等二进制数据）。支持索引检索。
? 使用过程包括：指定数据库模式，建立数据库连接，然后检索和更新一系列事务。由于IndexedDB提供的是比较底层的api，所以开发中可以借助第三方库来操作。
四. 总结
-
Cookie 解决的是HTTP协议无状态的问题；
-
Web Storage 提供的纯浏览器端存储的功能，不涉及跟服务端交互；
-
IndexedDB 是更专业的浏览器端存储方案，支持更大的存储容量，更复杂的数据结构。
? 正式有了这些更专业的浏览器端存储方案的出现，让Web应用的性能进一步的提升，可以承载更加复杂的业务功能。