客户端存储
# 客户端存储
# 1. 简介
出于记录用户特定数据的目的，客户端存储技术是前端开发的重要组成部分。常用的存储机制包括 Cookie 和 Web Storage。它们各有优缺点，适用于不同的场景。
常用存储机制
Cookie
- 优点：需要与服务器端交互，浏览器自动管理不同站点的数据并发送到服务器端。
- 缺点：安全性受限，数据量受限（4KB），可用性受限，明文存储。
Web Storage
- 优点：操作简单，不会自动发送到服务器端，存储空间大（浏览器可支持到10MB以上）。
- 缺点：安全性受限，数据持久（localStorage）或仅在会话期间有效（sessionStorage），明文存储。
# 2. Cookie
Cookie 是一种在客户端以键值对形式存储数据的技术，使用 document.cookie 属性进行操作。
# 写入 Cookie
// 写入一个带有失效时间的 Cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT";
// 如果未指定 expires，Cookie 在浏览器关闭时失效
document.cookie = "username=JohnDoe";
1
2
3
4
5
2
3
4
5
# 读取 Cookie
// 读取所有 Cookie
var allCookies = document.cookie; // 返回类似 "username=JohnDoe; userId=12345"
// 根据分号和等号拆分 Cookie
function getCookieValue(name) {
var cookies = document.cookie.split("; ");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].split("=");
if (cookie[0] === name) {
return cookie[1];
}
}
return null;
}
console.log(getCookieValue("username")); // 输出: JohnDoe
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 删除 Cookie
// 将 Cookie 的 expires 设置为过去的时间，删除指定的 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
1
2
2
# 3. Web Storage
Web Storage 是 HTML5 引入的本地存储解决方案，可以在客户端本地存储数据，分为 localStorage 和 sessionStorage。
# 3.1 简介
- localStorage：在本地永久性存储数据，数据不会过期。
- sessionStorage：存储的数据只在会话期间有效，关闭浏览器则自动删除。
# 3.2 基本用法
localStorage 和 sessionStorage 的用法相同，常用 API 如下：
| 方法/属性 | 作用 |
|---|---|
| setItem(key, value) | 写入数据，添加/修改键值对 |
| getItem(key) | 读取数据，根据键读取对应的值 |
| removeItem(key) | 删除数据，根据键删除对应的键值对 |
| key(index) | 根据索引获取对应的键 |
| clear() | 清空数据 |
| length | 获取键值对数量 |
// 写入数据
localStorage.setItem("username", "JohnDoe");
sessionStorage.setItem("username", "JohnDoe");
// 读取数据
console.log(localStorage.getItem("username")); // 输出: JohnDoe
console.log(sessionStorage.getItem("username")); // 输出: JohnDoe
// 删除数据
localStorage.removeItem("username");
sessionStorage.removeItem("username");
// 清空数据
localStorage.clear();
sessionStorage.clear();
// 获取键值对数量
console.log(localStorage.length); // 输出: 0
console.log(sessionStorage.length); // 输出: 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
注：WebStorage 中只能存储字符串数据，如果要存储对象，需要先转换为字符串格式。
var user = { name: "John", age: 30 };
localStorage.setItem("user", JSON.stringify(user));
var storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // 输出: John
1
2
3
4
2
3
4
# 3.3 事件监听
监听 WebStorage 中数据的变化，当数据发生变化时触发执行回调函数。
window.addEventListener("storage", function(event) {
console.log("Key changed:", event.key); // 发生变化的键
console.log("Old value:", event.oldValue); // 原值
console.log("New value:", event.newValue); // 新值
console.log("Storage area:", event.storageArea); // 发生变化的 localStorage 或 sessionStorage 对象
console.log("URL:", event.url); // 引发变化的页面的 URL
});
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3.4 综合示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Storage 示例</title>
<script type="text/javascript">
// 定义保存数据的函数
function saveData() {
// 使用 localStorage 保存数据
localStorage.setItem("username", "JohnDoe");
// 使用 sessionStorage 保存数据
sessionStorage.setItem("username", "JohnDoe");
}
// 定义读取数据的函数
function readData() {
// 从 localStorage 中读取数据
var localStorageData = localStorage.getItem("username");
// 从 sessionStorage 中读取数据
var sessionStorageData = sessionStorage.getItem("username");
// 输出读取到的数据
console.log("Local Storage:", localStorageData);
console.log("Session Storage:", sessionStorageData);
}
// 定义清空数据的函数
function clearData() {
// 清空 localStorage 中的所有数据
localStorage.clear();
// 清空 sessionStorage 中的所有数据
sessionStorage.clear();
}
// 添加对 storage 事件的监听器，当 WebStorage 数据变化时触发
window.addEventListener("storage", function(event) {
console.log("Key changed:", event.key); // 输出发生变化的键
console.log("Old value:", event.oldValue); // 输出原值
console.log("New value:", event.newValue); // 输出新值
console.log("Storage area:", event.storageArea); // 输出发生变化的存储区域（localStorage 或 sessionStorage）
console.log("URL:", event.url); // 输出引发变化的页面的 URL
});
</script>
</head>
<body>
<!-- 按钮点击时调用 saveData 函数，保存数据 -->
<button onclick="saveData()">保存数据</button>
<!-- 按钮点击时调用 readData 函数，读取数据 -->
<button onclick="readData()">读取数据</button>
<!-- 按钮点击时调用 clearData 函数，清空数据 -->
<button onclick="clearData()">清空数据</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08