程序员scholar
  • 前端三剑客
  • JavaScript
scholar
2024-07-19
目录

客户端存储

# 客户端存储

# 1. 简介

出于记录用户特定数据的目的，客户端存储技术是前端开发的重要组成部分。常用的存储机制包括 Cookie 和 Web Storage。它们各有优缺点，适用于不同的场景。

常用存储机制

  • Cookie

    • 优点：需要与服务器端交互，浏览器自动管理不同站点的数据并发送到服务器端。
    • 缺点：安全性受限，数据量受限（4KB），可用性受限，明文存储。

  • Web Storage

    • 优点：操作简单，不会自动发送到服务器端，存储空间大（浏览器可支持到10MB以上）。
    • 缺点：安全性受限，数据持久（localStorage）或仅在会话期间有效（sessionStorage），明文存储。

# 2. Cookie

Cookie 是一种在客户端以键值对形式存储数据的技术，使用 document.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
// 读取所有 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
// 将 Cookie 的 expires 设置为过去的时间，删除指定的 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
1
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

注：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

# 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

# 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
编辑此页 (opens new window)
上次更新: 2025/01/25, 22:32:05
内置对象
模块加载方案

← 模块加载方案→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar