JS前端数据存储

网页可以通过以下几种方法在本地记录数据：

1. Cookies（小型数据存储）

• 特点: 适用于存储少量数据（通常 4KB 以内）。
• 用途: 主要用于会话管理（如用户身份认证）、站点偏好设置、跟踪用户行为等。
• 示例代码:

  document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

• 限制:

  • 容量小（每个 cookie 限制约 4KB）。
  • 会随着 HTTP 请求发送，可能影响性能。
  • 受 SameSite、HttpOnly 和 Secure 限制，部分受浏览器隐私策略影响。

2. LocalStorage（本地存储）

• 特点: 适用于存储较大数据（通常 5MB 以上），数据不会随 HTTP 请求发送，持久化存储。
• 用途: 适合存储用户设置、简单的缓存数据等。
• 示例代码:

  localStorage.setItem("username", "JohnDoe");
  console.log(localStorage.getItem("username")); // "JohnDoe"

• 限制:

  • 只能存储字符串类型数据（可用 JSON.stringify 转换）。
  • 不能跨域访问，仅限同源页面。

3. SessionStorage（会话存储）

• 特点: 仅在当前浏览器会话（session）内有效，关闭标签页或浏览器后数据丢失。
• 用途: 适合存储临时数据，如表单数据、会话状态等。
• 示例代码:

  sessionStorage.setItem("sessionID", "12345");
  console.log(sessionStorage.getItem("sessionID")); // "12345"

• 限制:

  • 不能跨页面、跨标签访问。
  • 只能存储字符串类型数据。

4. IndexedDB（浏览器数据库）

• 特点: 适用于存储大量数据（可达数百 MB），支持复杂数据结构（如对象、二进制数据）。
• 用途: 适用于离线存储、Web 应用缓存等。
• 示例代码:

  let request = indexedDB.open("MyDatabase", 1);
  request.onsuccess = function(event) {
      let db = event.target.result;
      let transaction = db.transaction(["users"], "readwrite");
      let store = transaction.objectStore("users");
      store.add({ id: 1, name: "JohnDoe" });
  };

• 限制:

  • API 较复杂，需要异步操作（使用 Promises 或 async/await）。
  • 不同浏览器可能有不同的存储上限。

5. Web SQL（已被废弃）

• 允许使用 SQL 语法操作本地数据库，但已被 W3C 废弃，不建议使用。

6. File API（本地文件存储）

• 特点: 允许用户在本地选择文件，并让 JavaScript 读取或修改其内容。
• 用途: 适用于导入/导出用户数据，如文本、图片等。
• 示例代码:

  let input = document.createElement("input");
  input.type = "file";
  input.onchange = function(event) {
      let file = event.target.files[0];
      let reader = new FileReader();
      reader.onload = function(e) {
          console.log(e.target.result); // 文件内容
      };
      reader.readAsText(file);
  };
  document.body.appendChild(input);

• 限制:

  • 需要用户手动选择文件。
  • 不能直接访问文件系统（出于安全考虑）。

7. Cache API（缓存存储，用于 PWA）

• 特点: 允许 Service Worker 缓存 HTTP 请求和响应，以支持离线访问。
• 用途: 适用于 Progressive Web Apps（PWA），缓存网页资源。
• 示例代码:

  caches.open("my-cache").then(cache => {
      cache.add("/images/logo.png");
  });

• 限制:

  • 只能缓存 HTTP 请求响应，而不能存储任意数据。

8. Service Workers + Background Sync（后台数据同步）

• 特点: 允许在用户离线时记录数据，并在恢复网络连接后同步到服务器。
• 用途: 适用于 PWA，如离线填表、消息通知等。
• 示例代码:

  navigator.serviceWorker.register("/sw.js").then(reg => {
      console.log("Service Worker registered");
  });

总结对比

如果需要持久化存储大量数据，推荐 IndexedDB；如果是简单的键值对存储，推荐 LocalStorage；如果是临时存储（会话级别），推荐 SessionStorage。