第25章客户端存储

客户端存储数据有几种方式：cookie,storage。

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

浏览器会存储这些会话信息，并在之后的每个请求中都会通过 HTTP 头部 cookie 再将它们发回服务器。

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

cookie 在浏览器的构成如下：

名称：唯一标识 cookie 的名称，不区分大小写。
值：存储在 cookie 里的字符串值。这个值必须经过 URL 编码。
域：cookie 有效的域。
路径：请求 URL 中包含这个路径才会把 cookie 发送到服务器。（可以用来限制不同路径下的服务）。
过期时间：表示何时删除 cookie 的时间戳。即有效期。
安全标志：是否仅支持https才发送cookie，如果是，设置secure即可。

cookie参数之间使用;隔开。

Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com

js中如何设置cookie，很简单。

document.cookie = "name=Nicholas";

如果实际开发中担心碰到每个域的 cookie 限制，则可以考虑使用子 cookie 方案（详见JS高级程序设计第758页）。

还有一种叫作 HTTP-only 的 cookie。HTTP-only 可以在浏览器设置，也可以在服务器设置，但只能在服务器上读取。可以用来防范XXS攻击（如果支持HttpOnly的浏览器检测到包含HttpOnly标志的cookie，并且当客户端脚本代码尝试读取该cookie时，浏览器将返回一个空字符串作为结果。）。

# Web Storage

包括2个对象：localStorage 和 sessionStorage，用于大量存储会话数据。

所有现代浏览器在实现storage存储写入时都使用了同步阻塞方式，

# Storage 方法

Storage对象上的常用方法有：

getItem(name)：取得给定 name 的值。
setItem(name, value)：设置给定 name 的值。
removeItem(name)：删除给定 name 的名/值对。

# sessionStorage 对象

只存储会话数据，浏览器关闭后数据删除。
刷新页面不会删除数据。

// 使用方法存储数据
sessionStorage.setItem("name", "Nicholas"); 
// 使用属性存储数据
sessionStorage.book = "Professional JavaScript";

let name = sessionStorage.getItem("name"); 
// 使用属性取得数据
let book = sessionStorage.book;

// 使用 delete 删除值
delete sessionStorage.name; 
// 使用方法删除值
sessionStorage.removeItem("book");

1
2
3
4
5
6
7
8
9
10
11
12
13

# localStorage 对象

要访问同一个 localStorage 对象，页面必须来自同一个域（子域不可以）、在相同的端口上使用相同的协议。

localStorage和sessionStorage拥有相同的方法，区别在于localStorage是永久存储，除非js删除或用户清除浏览器缓存。

# 存储事件

localStorage和sessionStorage设置和清除缓存时，会触发storage事件。

window.addEventListener("storage", 
 (event) => alert('Storage changed for ${event.domain}'));

1
2

# IndexedDB

IndexedDB 设计的目的是方便 JavaScript 对象的存储和获取，同时也支持查询和搜索。

IndexedDB 是类似于 SQL 数据库的结构化数据存储机制。不同的是，IndexedDB 存储的是对象，而

不是数据表。

#前端笔记

上次更新: 2022/04/27, 22:08:11

← 第24章网络请求与远程资源第26章模块→

第25章 客户端存储

# cookie