浏览器本地存储大公开，帮你轻松玩转数据持久化

2022-12-05 08:04:50

浏览器本地存储的利器：深入了解 Cookies、localStorage、sessionStorage 和 IndexedDB

前言

在现代前端开发中，存储和管理数据至关重要，特别是在用户退出或刷新页面后仍需要保留数据的情况下。浏览器本地存储提供了多种机制来实现此目的，包括 Cookies、localStorage、sessionStorage 和 IndexedDB。本文将深入探讨每种方法的优缺点，并提供使用示例代码。

什么是浏览器本地存储？

浏览器本地存储是指允许你在用户设备的浏览器中存储数据的机制。这与服务器端存储不同，后者将数据保存在远程服务器上。本地存储使你能够在客户端存储数据，以便在页面刷新或关闭浏览器后仍然可以访问这些数据。

四种本地存储方式

1. Cookies

Cookies 是服务器发送给浏览器并由浏览器存储在本地的小型文本文件。每次 HTTP 请求，浏览器都会将这些文件发送回服务器。Cookies 通常用于存储用户偏好、会话 ID 和购物车中的物品等信息。

优点：

轻量级，存储容量低
在会话之间持久保存

缺点：

存储容量有限（通常为 4KB）
容易受到跨站点脚本攻击 (XSS)

2. localStorage

localStorage 是 HTML5 中引入的本地存储机制。它允许你在浏览器中存储大量数据，即使页面刷新或浏览器关闭，数据也不会丢失。localStorage 的数据保存在浏览器的硬盘上，因此速度较快，但容量有限（通常为 5MB）。

优点：

存储容量大，比 Cookies 更大
在页面刷新和浏览器会话之间持久保存

缺点：

不适用于需要跨域访问数据的情况

3. sessionStorage

sessionStorage 是 HTML5 中引入的另一种本地存储机制。与 localStorage 类似，它允许你在浏览器中存储数据，但这些数据仅在当前浏览器会话中有效。一旦浏览器关闭，sessionStorage 中的数据就会被清除。

优点：

存储容量与 localStorage 相同
仅在当前会话期间有效，提高安全性

缺点：

在页面刷新后数据丢失

4. IndexedDB

IndexedDB 是 HTML5 中引入的 NoSQL 数据库，允许你在浏览器中存储大量结构化数据。IndexedDB 的数据保存在浏览器的硬盘上，因此速度较快，容量也较大（通常为 250MB）。

优点：

存储容量大，适用于存储大量数据
支持事务和索引，提高数据处理效率

缺点：

复杂性较高，需要更高级的编程技能

如何使用浏览器本地存储

1. 使用 Cookies

// 设置 Cookie
document.cookie = "username=John Doe";

// 获取 Cookie
var username = document.cookie.match(/username=([^;]+)/)[1];

// 删除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

2. 使用 localStorage

// 设置 localStorage
localStorage.setItem("username", "John Doe");

// 获取 localStorage
var username = localStorage.getItem("username");

// 删除 localStorage
localStorage.removeItem("username");

3. 使用 sessionStorage

// 设置 sessionStorage
sessionStorage.setItem("username", "John Doe");

// 获取 sessionStorage
var username = sessionStorage.getItem("username");

// 删除 sessionStorage
sessionStorage.removeItem("username");

4. 使用 IndexedDB

// 打开 IndexedDB 数据库
var request = indexedDB.open("myDatabase", 1);

// 创建对象存储空间
request.onsuccess = function(event) {
  var db = event.target.result;
  var objectStore = db.createObjectStore("users", { keyPath: "id" });
};

// 添加数据到对象存储空间
var request = objectStore.add({ id: 1, username: "John Doe" });

// 获取数据从对象存储空间
var request = objectStore.get(1);
request.onsuccess = function(event) {
  var user = event.target.result;
};

// 删除数据从对象存储空间
var request = objectStore.delete(1);

常见的误解

所有本地存储方法都可以跨域访问数据。
错误。 localStorage 和 sessionStorage 不支持跨域访问。
IndexedDB 是比其他本地存储方法更慢的选项。
错误。 IndexedDB 实际上是速度最快的本地存储方法之一，因为它的数据保存在浏览器的硬盘上。
Cookies 是存储敏感数据的最佳方式。
错误。 Cookies 容易受到 XSS 攻击，因此不适合存储敏感数据。