首页
/ 正文

JavaScript 存储对象（保姆级教程）

更新时间: 2025-04-17 06:31:38

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习，欢迎点击围观

前言

在 Web 开发中，数据的存储与管理是核心需求之一。无论是构建一个简单的待办事项应用，还是开发复杂的电商系统，开发者都需要高效且灵活的方式来存储和操作数据。JavaScript 存储对象这一主题，正是围绕如何利用 JavaScript 的特性与浏览器提供的工具，将对象形式的数据持久化或临时保存。

本文将从零开始，逐步讲解 JavaScript 中存储对象的多种方法，包括对象字面量、数组、浏览器存储（如 localStorage）、数据库级方案（如 IndexedDB），以及 JSON 序列化的应用。通过实际案例与代码示例，帮助读者理解不同场景下的最佳实践，并最终选择适合自身项目的存储策略。

对象字面量：存储对象的基础语法

在 JavaScript 中，对象（Object）是最直观的数据结构。通过对象字面量，开发者可以快速将键值对（Key-Value）组织成结构化的数据集合。

基础语法与示例

对象字面量通过大括号 {} 定义，每个键对应一个值。例如，存储用户信息：

const user = {  
  name: "Alice",  
  age: 25,  
  isStudent: true,  
  hobbies: ["reading", "coding"],  
};

比喻：可以将对象想象为一个文件夹，每个键是文件夹中的文件名，值则是文件内容。通过键名，可以快速访问或修改对应的数据。

对象的增删改查

添加属性：直接通过点符号或方括号赋值：

user.address = "123 Main St"; // 点符号  
user["jobTitle"] = "Developer"; // 方括号（适用于动态键名）

删除属性：使用 delete 关键字：

delete user.isStudent; // 删除属性

访问属性：通过键名获取值：

console.log(user.hobbies[0]); // 输出 "reading"

局限性

对象字面量适合临时存储或在内存中操作数据，但无法持久化保存（页面刷新后数据会丢失）。因此，它通常作为数据的临时容器，而非长期存储方案。

数组：批量存储对象的容器

当需要存储多个对象时，数组（Array）是理想的解决方案。数组允许将多个对象组织成列表，方便批量操作。

数组存储对象的示例

const users = [  
  { id: 1, name: "Bob", score: 90 },  
  { id: 2, name: "Charlie", score: 85 },  
];

比喻：数组就像一个书架，每个书架上的书籍（对象）都有独立的编号（索引），可以通过索引快速定位到具体的数据。

数组的常见操作

添加对象：使用 push() 或 unshift()：

users.push({ id: 3, name: "Dave", score: 95 });

遍历对象：通过 forEach 或 for...of 循环：

users.forEach(user => {  
  console.log(`Name: ${user.name}, Score: ${user.score}`);  
});

筛选与排序：使用 filter()、sort() 等方法：

const topStudents = users.filter(user => user.score >= 90);

局限性

与对象类似，数组存储的对象数据同样无法持久化。此外，当数据量较大时，直接操作数组可能影响性能，需结合其他工具优化。

浏览器本地存储：持久化存储对象的基础方案

若需在用户关闭页面后仍保留数据，可以使用浏览器提供的本地存储（Local Storage）。它支持在客户端存储键值对数据，且容量有限（通常约 5MB）。

使用 `localStorage` 存储对象

由于 localStorage 只能存储字符串，需通过 JSON.stringify() 将对象转换为字符串，再通过 JSON.parse() 恢复：

存储示例

const user = { name: "Eve", email: "eve@example.com" };  
localStorage.setItem("user", JSON.stringify(user));

读取示例

const storedUser = localStorage.getItem("user");  
if (storedUser) {  
  const parsedUser = JSON.parse(storedUser);  
  console.log(parsedUser.email); // 输出 "eve@example.com"  
}

局限性与优化

容量限制：单条数据不宜过大，且总存储空间有限。
安全性：存储敏感数据需加密（如密码），避免明文泄露。
兼容性：需处理旧版浏览器不支持 localStorage 的情况。

IndexedDB：高级对象存储方案

对于需要存储大量结构化数据的场景（如离线应用、复杂表单数据），IndexedDB 提供了类似关系型数据库的功能，支持事务、索引和复杂查询。

基本概念与结构

数据库（Database）：存储数据的顶层容器。
对象存储（Object Store）：类似数据库的表，存放具体对象。
索引（Index）：加速查询的键值对结构。

创建数据库与存储对象

// 打开或创建数据库  
const request = indexedDB.open("MyDatabase", 1);  

request.onupgradeneeded = function(event) {  
  const db = event.target.result;  
  // 创建对象存储空间  
  const userStore = db.createObjectStore("users", { keyPath: "id" });  
  userStore.createIndex("nameIndex", "name", { unique: false });  
};  

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

  // 添加数据  
  const transaction = db.transaction(["users"], "readwrite");  
  const userStore = transaction.objectStore("users");  
  userStore.add({ id: 1, name: "Frank", age: 30 });  

  transaction.oncomplete = function() {  
    db.close();  
  };  
};

查询与更新数据

// 查询数据  
const getRequest = userStore.get(1);  
getRequest.onsuccess = function() {  
  console.log(getRequest.result); // 输出 { id: 1, name: "Frank", age: 30 }  
};

局限性

复杂度：API 语法较复杂，需熟悉事务、回调和事件驱动的模式。
兼容性：需处理旧版浏览器的 polyfill 或回退方案。

JSON 序列化：对象与字符串的桥梁

无论使用哪种存储方式，JSON 序列化都是将对象转换为可存储格式的关键步骤。

原理与示例

序列化：将对象转为字符串：

const user = { name: "Grace", city: "New York" };  
const stringified = JSON.stringify(user); // 输出 '{"name":"Grace","city":"New York"}'

反序列化：将字符串转回对象：

const parsedUser = JSON.parse(stringified);  
console.log(parsedUser.city); // 输出 "New York"

注意事项

循环引用：对象包含自身引用时会抛出错误。
特殊类型：undefined、Function 等类型无法被正确序列化。

实战案例：构建购物车功能

通过一个购物车案例，对比不同存储方案的实现：

需求分析

临时存储：用户浏览商品时，将商品信息暂存在内存中。
持久化存储：用户登录后，将购物车数据保存到 localStorage 或 IndexedDB。

使用对象与数组的临时存储

// 内存中存储购物车  
let cart = [];  

function addToCart(product) {  
  cart.push(product);  
}  

function getCartTotal() {  
  return cart.reduce((sum, item) => sum + item.price, 0);  
}

使用 `localStorage` 持久化存储

// 保存购物车到 localStorage  
function saveCart() {  
  localStorage.setItem("cart", JSON.stringify(cart));  
}  

// 加载购物车  
function loadCart() {  
  const storedCart = localStorage.getItem("cart");  
  return storedCart ? JSON.parse(storedCart) : [];  
}

使用 `IndexedDB` 的高级方案

// 将购物车数据存储到 IndexedDB  
function saveToDB(cartItems) {  
  const transaction = db.transaction(["cart"], "readwrite");  
  const store = transaction.objectStore("cart");  
  cartItems.forEach(item => store.add(item));  
}

结论

JavaScript 存储对象的实现方式多样，开发者需根据场景需求选择方案：

临时存储：对象和数组适合小规模、短时间的数据操作。
持久化存储：localStorage 适合轻量级数据，IndexedDB 则适合复杂结构和大量数据。
序列化工具：JSON 是连接对象与存储的桥梁，但需注意其限制。

通过本文的讲解，读者应能掌握从基础语法到高级方案的实现逻辑，并在实际开发中灵活选择存储策略。无论是构建个人项目还是企业级应用，合理利用 JavaScript 存储对象的特性，将显著提升数据管理的效率与可靠性。

最后建议：在项目中结合代码规范与测试，确保存储方案的健壮性。例如，使用 try...catch 处理序列化错误，或通过分页查询优化 IndexedDB 的性能。实践是掌握知识的最佳途径，希望本文能成为你探索 JavaScript 数据存储的起点！

JavaScript 存储对象（保姆级教程）

前言

对象字面量：存储对象的基础语法

基础语法与示例

对象的增删改查

局限性

数组：批量存储对象的容器

数组存储对象的示例

数组的常见操作

局限性

浏览器本地存储：持久化存储对象的基础方案

使用 `localStorage` 存储对象

存储示例

读取示例

局限性与优化

IndexedDB：高级对象存储方案

基本概念与结构

创建数据库与存储对象

查询与更新数据

局限性

JSON 序列化：对象与字符串的桥梁

原理与示例

注意事项

实战案例：构建购物车功能

需求分析

使用对象与数组的临时存储

使用 `localStorage` 持久化存储

使用 `IndexedDB` 的高级方案

结论

最新发布

Rider 2025.1.1 最新破解版安装教程（附激活码~）

Clion 2025.1 最新激活码，破解版安装教程（至2099年~）

GoLand 2025.1 最新激活码，破解版安装教程（至2099年~）

PhpStorm 2025.1 最新破解版安装教程（附激活码~）

DataGrip 2025.1 最新激活码，破解版安装教程（至2099年~）

Webstorm 2025.1 最新激活码，破解版安装教程（至2099年~）

Pycharm 2025.1 最新激活码，破解版安装教程（至2099年~）

IDEA 2025.1 最新激活码，破解版安装教程（至2099年~）

Cursor @ 符号（千字长文）

POP3 协议（一文讲透）

JavaScript 存储对象（保姆级教程）

前言

对象字面量：存储对象的基础语法

基础语法与示例

对象的增删改查

局限性

数组：批量存储对象的容器

数组存储对象的示例

数组的常见操作

局限性

浏览器本地存储：持久化存储对象的基础方案

使用 localStorage 存储对象

存储示例

读取示例

局限性与优化

IndexedDB：高级对象存储方案

基本概念与结构

创建数据库与存储对象

查询与更新数据

局限性

JSON 序列化：对象与字符串的桥梁

原理与示例

注意事项

实战案例：构建购物车功能

需求分析

使用对象与数组的临时存储

使用 localStorage 持久化存储

使用 IndexedDB 的高级方案

结论

最新发布

Rider 2025.1.1 最新破解版安装教程（附激活码~）

Clion 2025.1 最新激活码，破解版安装教程（至2099年~）

GoLand 2025.1 最新激活码，破解版安装教程（至2099年~）

PhpStorm 2025.1 最新破解版安装教程（附激活码~）

DataGrip 2025.1 最新激活码，破解版安装教程（至2099年~）

Webstorm 2025.1 最新激活码，破解版安装教程（至2099年~）

Pycharm 2025.1 最新激活码，破解版安装教程（至2099年~）

IDEA 2025.1 最新激活码，破解版安装教程（至2099年~）

Cursor @ 符号（千字长文）

POP3 协议（一文讲透）

使用 `localStorage` 存储对象

使用 `localStorage` 持久化存储

使用 `IndexedDB` 的高级方案