js如何将json存储到本地

JavaScript 实战：如何将 JSON 数据存储到本地存储

在 Web 开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易读性和易解析性被广泛使用，而将 JSON 数据存储到本地（即用户浏览器端）是常见需求，例如保存用户偏好设置、缓存接口数据或实现离线功能，本文将详细介绍 JavaScript 中将 JSON 数据存储到本地的三种主流方式：localStorage、sessionStorage 和 IndexedDB，并对比其适用场景，帮助开发者选择最合适的方案。

使用 localStorage：持久化存储键值对数据

localStorage 是 HTML5 提供的浏览器本地存储 API，允许以“键值对”的形式存储数据，且数据永久保存（除非用户手动清除缓存或代码主动删除），它适合存储小量（通常约 5MB）、结构简单的 JSON 数据。

核心方法

localStorage 提供了四个核心方法，与 JSON 存储直接相关：

• localStorage.setItem(key, value)：存储数据（value 会自动转换为字符串）；
• localStorage.getItem(key)：获取数据（返回字符串，需手动解析为 JSON）；
• localStorage.removeItem(key)：删除指定键的数据；
• localStorage.clear()：清空所有存储数据。

存储与读取 JSON 的完整流程

由于 localStorage 只能存储字符串类型，因此存储 JSON 对象时需先通过 JSON.stringify() 转换为字符串，读取时再通过 JSON.parse() 还原为对象。

示例代码

// 1. 准备 JSON 数据
const userData = {
  id: 1001,
  name: "张三",
  age: 25,
  hobbies: ["阅读", "编程", "旅行"]
};
// 2. 存储 JSON 到 localStorage
localStorage.setItem("user", JSON.stringify(userData));
// 3. 从 localStorage 读取 JSON 数据
const storedData = localStorage.getItem("user");
if (storedData) {
  const parsedData = JSON.parse(storedData);
  console.log("读取到的用户数据：", parsedData);
  console.log("用户姓名：", parsedData.name); // 输出：张三
}
// 4. 删除存储的数据（可选）
// localStorage.removeItem("user");
// localStorage.clear(); // 清空所有数据

注意事项

• 存储限制：localStorage 的存储容量通常为 5MB（不同浏览器可能略有差异），超出会抛出 QuotaExceededError 异常。
• 数据类型限制：只能存储字符串，复杂对象需手动序列化/反序列化。
• 同源策略限制：不同协议、域名或端口下的页面无法共享 localStorage 数据。
• 隐私模式：在隐私模式下，localStorage 的行为可能不一致（部分浏览器会限制写入）。

使用 sessionStorage：会话级临时存储

sessionStorage 与 localStorage 的 API 基本一致，但核心区别在于生命周期：sessionStorage 的数据仅在当前会话有效，关闭浏览器标签页或窗口后数据会被自动清除，它适合存储临时性的 JSON 数据，如当前会话的用户状态、表单草稿等。

存储与读取 JSON 的示例

// 准备 JSON 数据
const cartData = {
  items: [
    { id: 1, name: "商品A", price: 99, quantity: 2 },
    { id: 2, name: "商品B", price: 149, quantity: 1 }
  ],
  total: 347
};
// 存储 JSON 到 sessionStorage（当前会话有效）
sessionStorage.setItem("cart", JSON.stringify(cartData));
// 读取 JSON 数据
const storedCart = sessionStorage.getItem("cart");
if (storedCart) {
  const parsedCart = JSON.parse(storedCart);
  console.log("当前购物车：", parsedCart);
  console.log("商品总数：", parsedCart.items.length); // 输出：2
}
// 关闭浏览器标签页后，数据自动清除

适用场景

• 临时保存表单输入内容,避免页面刷新丢失；
• 记录用户当前会话的操作状态（如分页页码、筛选条件）；
• 多标签页间隔离的数据（不同标签页的 sessionStorage 互不干扰）。

使用 IndexedDB：存储大量结构化 JSON 数据

当需要存储大量（超过 5MB）、结构复杂的 JSON 数据时，localStorage 和 sessionStorage 的容量限制和简单键值对存储方式已无法满足需求。IndexedDB（浏览器内置的 NoSQL 数据库）是更优的选择，它支持事务、索引查询，适合存储图片、文件、复杂对象等非结构化数据。

IndexedDB 核心概念

• 数据库（Database）：包含多个“对象存储”（类似数据库中的表）；
• 对象存储（Object Store）：存储具体数据（类似表），每个存储可定义“键路径”（keyPath）作为主键；
• 事务（Transaction）：确保数据操作的原子性（要么全部成功，要么全部失败）；
• 索引（Index）：加速特定字段的查询。

存储与读取 JSON 的完整流程

IndexedDB 的操作是异步的，需通过 IDBDatabase、IDBObjectStore 等接口完成，通常结合 Promise 或回调函数处理异步逻辑。

示例代码：存储并查询用户列表

// 1. 打开/创建数据库
const dbName = "userDB";
const dbVersion = 1;
const request = indexedDB.open(dbName, dbVersion);
// 数据库升级回调（创建对象存储）
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  // 检查对象存储是否存在，不存在则创建
  if (!db.objectStoreNames.contains("users")) {
    const objectStore = db.createObjectStore("users", { keyPath: "id" }); // id 作为主键
    // 创建索引（可选，加速查询）
    objectStore.createIndex("name", "name", { unique: false });
    objectStore.createIndex("age", "age", { unique: false });
  }
};
// 数据库打开成功
request.onsuccess = (event) => {
  const db = event.target.result;
  console.log("数据库连接成功");
  // 2. 存储 JSON 数据
  const usersData = [
    { id: 1, name: "张三", age: 25, email: "zhangsan@example.com" },
    { id: 2, name: "李四", age: 30, email: "lisi@example.com" },
    { id: 3, name: "王五", age: 28, email: "wangwu@example.com" }
  ];
  // 开启事务（读写模式）
  const transaction = db.transaction(["users"], "readwrite");
  const objectStore = transaction.objectStore("users");
  // 逐条存储数据
  usersData.forEach(user => {
    objectStore.add(user);
  });
  // 事务完成回调
  transaction.oncomplete = () => {
    console.log("用户数据存储成功");
    // 3. 读取 JSON 数据（查询所有用户）
    const getAllRequest = objectStore.getAll();
    getAllRequest.onsuccess = (event) => {
      const allUsers = event.target.result;
      console.log("所有用户数据：", allUsers);
      // 输出：[{id:1, name:"张三"...}, {id:2, name:"李四"...}, ...]
    };
    // 4. 条件查询（通过索引查询年龄为 28 的用户）
    const ageIndex = objectStore.index("age");
    const queryRequest = ageIndex.getAll(28);
    queryRequest.onsuccess = (event) => {
      const userByAge = event.target.result;
      console.log("年龄为 28 的用户：", userByAge); // 输出：[{id:3, name:"王五", age:28...}]
    };
  };
  // 事务失败回调
  transaction.onerror = (event) => {
    console.error("事务失败：", event.target.error);
  };
};
// 数据库打开失败回调
request.onerror = (event) => {
  console.error("数据库连接失败：", event.target.error);
};

适用场景

• 存储大量 JSON 数据（如用户日志、商品目录）；
• 需要复杂查询（如按字段筛选、排序、分页）；
• 支持离线功能（如缓存接口数据，网络恢复后同步）。

三种存储方式的对比