浏览器本地存储

岁月宁静
95 阅读5分钟

浏览器本地存储指的是浏览器提供的存储数据的多种技术。它们可以在不与服务器交互的情况下保存数据，以支持持久化和快速访问。常见的浏览器本地存储方式有 Cookie、LocalStorage、SessionStorage 和 IndexedDB。每种存储方式有不同的特性和适用场景，下面详细解释它们的区别与作用。

1. Cookie

1.1 作用

  • Cookie 是一种用于在客户端和服务器之间传递少量数据的技术。它通常用于保持用户的登录状态、跟踪用户的会话以及存储一些小型的会话信息。
  • 每个 Cookie 都可以携带少量信息（通常不超过 4KB），并会随每个 HTTP 请求自动发送到服务器。

1.2 特性

  • 持久性：可以设置 expires 或 max-age 属性，控制 Cookie 的有效期。未设置时，默认是会话级别的 Cookie，浏览器关闭后会被删除。
  • 存储大小：每个域名的 Cookie 总大小限制约为 4KB。
  • 与服务器交互：Cookie 会随每个请求自动发送给服务器，这可能会影响性能。

1.3 代码示例

设置一个 Cookie：

js
复制代码
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

读取 Cookie：

js
复制代码
console.log(document.cookie);

1.4 适用场景

  • 存储用户会话信息，如用户登录状态。
  • 用于跟踪用户行为，如网站的分析和广告跟踪。

2. LocalStorage

2.1 作用

  • LocalStorage 是 HTML5 提供的 Web 存储 API，允许开发者在客户端存储大容量数据。与 Cookie 不同，数据不会自动发送到服务器。
  • 它适合存储较大且持久化的数据，除非用户手动删除，否则数据会一直保留。

2.2 特性

  • 持久性：LocalStorage 中的数据持久保存，即使浏览器关闭或计算机重启，数据也不会丢失，除非被手动删除。
  • 存储大小：每个域名下可以存储大约 5-10MB 的数据。
  • 与服务器无关：LocalStorage 中的数据不会随每次请求自动发送到服务器。
  • 跨浏览器标签页和窗口共享数据。

2.3 代码示例

设置和读取 LocalStorage：

js
复制代码
// 设置数据
localStorage.setItem('username', 'JohnDoe');

// 获取数据
const user = localStorage.getItem('username');
console.log(user);

// 删除数据
localStorage.removeItem('username');

2.4 适用场景

  • 适合存储不需要频繁更改的持久化数据，例如用户的设置或主题偏好。
  • 不适合存储敏感信息，因为 LocalStorage 数据可以通过浏览器开发者工具轻松访问。

3. SessionStorage

3.1 作用

  • SessionStorage 是一种会话级别的存储方式，提供与 LocalStorage 类似的 API。不同之处在于，SessionStorage 的数据仅在当前会话下有效，当页面关闭或会话结束时，数据会被清除。

3.2 特性

  • 持久性：SessionStorage 的数据仅在页面会话期间有效。当用户关闭浏览器选项卡或窗口时，数据会被删除。
  • 存储大小：与 LocalStorage 类似，约为 5MB。
  • 与服务器无关：与 LocalStorage 一样，SessionStorage 的数据不会自动发送到服务器。
  • 仅在单个标签页会话中有效，不同标签页或窗口之间不会共享。

3.3 代码示例

设置和读取 SessionStorage：

js
复制代码
// 设置数据
sessionStorage.setItem('sessionID', 'abc123');

// 获取数据
const sessionId = sessionStorage.getItem('sessionID');
console.log(sessionId);

// 删除数据
sessionStorage.removeItem('sessionID');

3.4 适用场景

  • 适用于存储仅在当前会话期间有效的临时数据，例如临时表单数据或临时认证状态。
  • 一旦用户关闭浏览器选项卡或窗口，数据会自动清除。

4. IndexedDB

4.1 作用

  • IndexedDB 是浏览器提供的客户端数据库，允许存储大量的结构化数据。它是基于事务的、NoSQL 类型的数据库，适合存储复杂的数据和大型文件。
  • 与 LocalStorage 相比，IndexedDB 能够存储更大体量的数据，并支持更复杂的查询操作。

4.2 特性

  • 持久性：数据持久保存，除非用户清除浏览器缓存，数据将一直保留。
  • 存储大小：可存储几百 MB 甚至更多的数据，具体取决于浏览器。
  • 结构化存储：支持存储 JavaScript 对象、BLOB 等复杂数据类型。
  • 事务支持：IndexedDB 支持事务，保证数据读写的完整性和安全性。

4.3 代码示例

创建数据库并存储数据：

js
复制代码
let request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("users", { keyPath: "id" });
  objectStore.add({ id: 1, name: "John Doe" });
};

request.onsuccess = function(event) {
  let db = event.target.result;
  let transaction = db.transaction(["users"], "readonly");
  let objectStore = transaction.objectStore("users");
  let getUser = objectStore.get(1);
  getUser.onsuccess = function() {
    console.log(getUser.result);
  };
};

4.4 适用场景

  • 适用于需要存储大数据量的应用程序，如离线应用、PWA（渐进式网络应用）。
  • 适合存储复杂数据结构，例如离线缓存、用户文件、应用程序数据等。

5. 浏览器本地存储方式的对比

存储方式数据持久性存储大小与服务器的交互使用场景
Cookie可设置过期时间~4KB自动随请求发送用户会话状态、跟踪和小型数据存储
LocalStorage持久保存，除非手动删除~5-10MB不与服务器交互持久保存用户偏好、设置等
SessionStorage页面会话期间有效，关闭清除~5MB不与服务器交互页面会话中的临时数据
IndexedDB持久保存，除非手动删除几百 MB 或更大不与服务器交互复杂数据结构、大型数据存储，如文件或缓存

6. 总结

浏览器提供了多种本地存储方式，各有其优势和应用场景：

  • Cookie 适用于小型数据的存储，尤其是需要与服务器交互的数据。
  • LocalStorage 适合持久化存储较大且不敏感的数据，且无需频繁更新。
  • SessionStorage 适合临时数据存储，在用户关闭页面后数据将被清除。
  • IndexedDB 是功能最强大的本地存储技术，适合处理大数据和复杂的数据结构。

开发者应根据应用的需求和场景选择最合适的本地存储方式。

avatar
文章
阅读
粉丝