了解網路儲存

發佈於2024-11-07

Understanding Web Storage

介绍

数据存储是现代 Web 应用程序的一个重要方面。无论是保存用户首选项、缓存数据以供离线使用，还是跟踪会话，在浏览器中管理数据的方式都会显着影响用户体验。我们有多种在浏览器中存储数据的选项，每种选项都有自己的优势和用例。在本文中，我们将探讨现代浏览器中可用的不同存储选项，包括本地存储、会话存储、IndexedDB 和 Cookie，并提供有关何时以及如何有效使用它们的见解。

曲奇饼

Cookie 是直接存储在用户浏览器中的小数据片段。它们主要用于跟踪会话、存储用户首选项和管理身份验证。与本地存储和会话存储不同，cookie 会随每个 HTTP 请求发送到服务器，这使得它们适合服务器端操作。

主要特点

容量：每个 cookie 限制为 4 KB。
持久性：Cookie 可以有一个到期日期，使其具有持久性或基于会话。
辅助功能：客户端（通过 JavaScript）和服务器端均可访问。

用法示例：

document.cookie = "username=Mario; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/"; // Save data

const cookies = document.cookie; // Retrieve data

优点

可用于客户端和服务器端数据存储。
支持持久存储的过期日期。

缺点

存储容量小。
随每个 HTTP 请求一起发送，可能会影响性能。

Cookie 非常适合会话管理、跟踪和处理需要服务器访问的少量数据等任务。

本地存储

本地存储是一种 Web 存储解决方案，允许您在 Web 浏览器中存储键值对，且没有过期时间。这意味着即使关闭并重新打开浏览器后数据仍然存在。本地存储通常用于保存用户首选项、缓存数据和其他需要持久存储的任务。

用法示例：

localStorage.setItem('username', 'Mario'); // Save data

const username = localStorage.getItem('username'); // Retrieve data

localStorage.removeItem('username'); // Remove data

主要特点

简单的API：本地存储提供了一个简单的API来存储和检索数据。
容量：本地存储通常为每个域提供高达 5-10 MB 的存储空间，这比 cookie 大得多。
持久性：存储在本地存储中的数据在浏览器会话中持续存在，直到明确删除。
辅助功能：可通过客户端的 JavaScript 进行访问。

优点

简单的键值对易于使用。
数据在会话中持续存在。

缺点

与 IndexedDB 相比，存储容量有限。
没有内置安全性；页面上的任何脚本都可以访问数据。

会话存储

会话存储与本地存储类似，但有一个关键区别：数据仅在页面会话期间存储。关闭浏览器选项卡后，数据将被清除。这使得会话存储非常适合临时数据存储，例如在浏览多步骤表单时保留表单输入。

用法示例：

sessionStorage.setItem('cart', 'coffee'); // Save data

const cartItem = sessionStorage.getItem('cart'); // Retrieve data

sessionStorage.removeItem('cart'); // Remove data

主要特点

容量：与本地存储类似，存储空间约为5-10 MB。
持久性：数据仅保留到浏览器选项卡关闭为止，但是，它可以在页面重新加载后继续存在。
辅助功能：可通过客户端的 JavaScript 进行访问。

优点

易于用于临时数据。
在会话中保持数据隔离。

缺点

限制会话持续时间，因此不适合长期存储。
与本地存储一样，页面上的任何脚本都可以访问数据，因此它缺乏内置的安全性。

会话存储对于单个会话中的临时数据存储需求特别有用，例如在用户会话期间维护状态，而无需跨会话保留数据。

索引数据库

IndexedDB 是一个低级 API，用于在用户浏览器中存储大量结构化数据，包括文件和 blob。与本地存储和会话存储不同，IndexedDB 是一个成熟的数据库，允许使用查询、事务和索引进行更复杂的数据存储和检索。

主要特点

容量：可以存储大量数据，仅受用户磁盘空间限制。
结构：支持键值对、复杂数据类型、层次结构的结构化数据存储。
辅助功能：异步API，允许非阻塞操作。

用法示例：

const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('users', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
};

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['users'], 'readwrite');
  const objectStore = transaction.objectStore('users');
  objectStore.add({ id: 1, name: 'Mario', age: 30 });
};