前端本地数据存储的几种常见方式总结

1. cookies

cookies 是浏览器用来存储数据的小文件，通常用于存储一些小量的数据，尤其是会话信息（如用户认证信息）。它们在客户端存储，可以跨页面访问，并且可以配置过期时间。

特点：

• 存储大小：每个 cookie 大小限制为 4kb。
• 有效期：可以设置过期时间（默认是会话结束后失效）。
• 跨页面共享：同一域名下的页面可以共享 cookies。
• 请求时自动发送：每次发送请求时，浏览器会自动将相关的 cookies 发送到服务器，适用于身份验证等。

示例：

// 设置 cookie
document.cookie = "username=john; expires=fri, 31 dec 2024 23:59:59 gmt";

// 获取 cookie
let cookies = document.cookie;
console.log(cookies);

// 删除 cookie（通过设置过期时间为过去的日期）
document.cookie = "username=; expires=thu, 01 jan 1970 00:00:00 gmt";

缺点：

• 数据存储量小（4kb）。
• 数据会随着每次请求一起发送到服务器，增加网络负担。
• 安全性较差，容易受到跨站脚本攻击（xss）。

2. localstorage

localstorage 提供了一种存储在客户端的数据存储方式，数据存储在浏览器中，即使页面关闭，数据依然会保留，直到显式删除。

特点：

• 存储大小：大约 5mb（不同浏览器可能有所不同）。
• 存储方式：数据以键值对的形式存储。
• 生命周期：数据永久存储，直到显式删除或浏览器的存储空间被清除。
• 仅客户端访问：localstorage 只能在客户端访问，不能跨窗口或跨标签页访问。

示例：

// 设置 localstorage
localstorage.setitem('username', 'john');

// 获取 localstorage
let username = localstorage.getitem('username');
console.log(username); // "john"

// 删除 localstorage
localstorage.removeitem('username');

// 清空所有 localstorage 数据
localstorage.clear();

优点：

• 存储容量大（相比 cookies）。
• 数据在浏览器关闭后依然保持有效。
• api 简单，支持同步操作。

缺点：

• 数据仅限于客户端存储，无法跨客户端同步。
• 存储的内容可以被 javascript 脚本访问，因此需要小心敏感数据的存储。
• 不支持跨域访问（每个域名下独立存储）。

3. sessionstorage

sessionstorage 是一种基于会话的存储方式，它与 localstorage 类似，但数据在浏览器窗口或标签页关闭时会自动清除。每个浏览器标签页或窗口都有独立的 sessionstorage。

特点：

• 存储大小：与 localstorage 类似，通常为 5mb。
• 生命周期：数据在浏览器会话期间有效，浏览器关闭时即丢失。
• 仅限同一会话：不同标签页或窗口中的 sessionstorage 不共享。

示例：

// 设置 sessionstorage
sessionstorage.setitem('sessionkey', 'value');

// 获取 sessionstorage
let value = sessionstorage.getitem('sessionkey');
console.log(value); // "value"

// 删除 sessionstorage
sessionstorage.removeitem('sessionkey');

// 清空所有 sessionstorage 数据
sessionstorage.clear();

优点：

• 存储容量大。
• 会话级别的数据存储，关闭浏览器窗口或标签页时会自动清空。
• 简单易用。

缺点：

• 数据存储只在会话期间有效，无法在不同会话中共享。

4. indexeddb

indexeddb 是一种低级别的 api，用于存储大量结构化数据。它允许你存储更复杂的数据类型，如文件和二进制数据，并且支持异步操作。

特点：

• 存储容量：没有严格的大小限制，通常可以存储数 mb 或更多的数据。
• 数据类型：可以存储对象、数组、文件等复杂类型。
• 异步操作：支持异步操作，因此不会阻塞主线程。
• 浏览器支持：大多数现代浏览器都支持 indexeddb。

示例：

// 打开（或创建）数据库
let request = indexeddb.open("mydatabase", 1);

request.onsuccess = function(event) {
  let db = event.target.result;

  // 创建一个对象存储
  let objectstore = db.createobjectstore("users", { keypath: "id" });

  // 插入数据
  objectstore.add({ id: 1, name: "john", age: 30 });

  // 获取数据
  let getrequest = objectstore.get(1);
  getrequest.onsuccess = function() {
    console.log(getrequest.result); // { id: 1, name: "john", age: 30 }
  };
};

request.onerror = function(event) {
  console.error("database error:", event.target.errorcode);
};

优点：

• 支持存储复杂的数据（如对象、数组、二进制数据）。
• 存储量大。
• 支持异步操作，不会阻塞 ui 线程。
• 可以创建索引，以加速数据检索。

缺点：

• api 比较复杂，使用上相对繁琐。
• 数据存储和检索速度可能会受到存储量和索引的影响。

5. web sql database（已废弃）

web sql 是一种基于 sql 的本地数据库 api，它可以在浏览器中存储结构化的数据，使用类似于 sql 的语法进行操作。这个 api 已被大多数浏览器弃用，推荐使用 indexeddb。

示例：

let db = opendatabase('mydatabase', '1.0', 'test database', 2 * 1024 * 1024);

// 创建表格
db.transaction(function (tx) {
  tx.executesql('create table if not exists logs (id unique, log)');
});

// 插入数据
db.transaction(function (tx) {
  tx.executesql('insert into logs (id, log) values (1, "foobar")');
});

特点：

• 基于 sql，数据存储和查询类似于传统的数据库。
• 数据较为结构化。

缺点：

• 已被弃用，不推荐使用。
• 目前只有部分浏览器支持。

6. file system api (仅限于浏览器扩展或特定环境)

file system api 提供了更接近操作本地文件系统的能力，允许浏览器内的 web 应用读写本地文件。这个 api 目前仅在特定的浏览器环境或扩展中可用，且并非所有浏览器都支持。

特点：

• 允许更直接的文件操作，如读取、写入和管理文件。
• 安全性较高，需要特定的权限。

缺点：

• 仅限特定环境或扩展，且使用较为复杂。

总结：

根据应用需求选择合适的存储方式，通常情况下 localstorage 和 sessionstorage 比较简单易用，而对于需要存储大量或复杂数据的情况，可以使用 indexeddb。

以上就是前端本地数据存储的几种常见方式总结的详细内容，更多关于前端本地数据存储的资料请关注代码网其它相关文章！