跳到主要内容

数据存储方式

在 JavaScript 中，数据存储是编程的基础之一。无论是简单的变量还是复杂的数据结构，数据存储方式的选择直接影响程序的性能和可维护性。本文将介绍 JavaScript 中常见的数据存储方式，并通过实际案例帮助你理解它们的应用场景。

1. 变量​

变量是 JavaScript 中最基本的数据存储方式。它们用于存储单个值，例如数字、字符串或布尔值。使用 let、const 或 var 关键字可以声明变量。

javascript
let name = "Alice";
const age = 25;
var isStudent = true;
备注
  • let 和 const 是 ES6 引入的声明方式，推荐使用它们代替 var。
  • const 用于声明常量，其值不可重新赋值。

示例：使用变量存储用户信息​

javascript
let userName = "Bob";
let userAge = 30;
console.log(`User: ${userName}, Age: ${userAge}`);

输出：

User: Bob, Age: 30

2. 数组​

数组是一种有序的数据结构，用于存储多个值。数组中的每个值都有一个索引（从 0 开始），可以通过索引访问或修改值。

javascript
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // 输出: Banana

示例：遍历数组​

javascript
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num * 2));

输出：

2
4
6
8
10
提示

数组非常适合存储一组相同类型的数据，例如购物车中的商品列表。

3. 对象​

对象是一种键值对（key-value pair）的数据结构，用于存储复杂的数据。对象的键是字符串，值可以是任何数据类型，包括其他对象或函数。

javascript
let user = {
  name: "Alice",
  age: 25,
  isStudent: true
};
console.log(user.name); // 输出: Alice

示例：动态添加属性​

javascript
user.email = "[email protected]";
console.log(user.email); // 输出: [email protected]
警告

对象的键必须是唯一的，否则会覆盖之前的值。

4. 本地存储（LocalStorage）​

本地存储是浏览器提供的一种持久化数据存储方式。它允许你在浏览器关闭后仍然保留数据。数据以键值对的形式存储，且只能存储字符串。

javascript
// 存储数据
localStorage.setItem("theme", "dark");

// 获取数据
let theme = localStorage.getItem("theme");
console.log(theme); // 输出: dark

示例：保存用户偏好​

javascript
localStorage.setItem("language", "en");
let language = localStorage.getItem("language");
console.log(`User prefers ${language} language.`);

输出：

User prefers en language.
注意

本地存储的数据没有过期时间，除非手动清除。请谨慎使用，避免存储敏感信息。

5. 会话存储（SessionStorage）​

会话存储与本地存储类似，但数据仅在当前会话期间有效。关闭浏览器标签页后，数据会被清除。

javascript
// 存储数据
sessionStorage.setItem("sessionID", "12345");

// 获取数据
let sessionID = sessionStorage.getItem("sessionID");
console.log(sessionID); // 输出: 12345

示例：临时存储表单数据​

javascript
sessionStorage.setItem("formData", JSON.stringify({ name: "Alice", age: 25 }));
let formData = JSON.parse(sessionStorage.getItem("formData"));
console.log(formData);

输出：

{ name: "Alice", age: 25 }

6. 实际应用场景​

场景 1：购物车功能​

使用数组存储用户选择的商品，并通过对象存储商品的详细信息。

javascript
let cart = [
  { id: 1, name: "Apple", price: 1.99 },
  { id: 2, name: "Banana", price: 0.99 }
];

cart.forEach(item => {
  console.log(`${item.name} - $${item.price}`);
});

输出：

Apple - $1.99
Banana - $0.99

场景 2：用户偏好设置​

使用本地存储保存用户的语言和主题偏好。

javascript
localStorage.setItem("language", "en");
localStorage.setItem("theme", "dark");

let language = localStorage.getItem("language");
let theme = localStorage.getItem("theme");
console.log(`Language: ${language}, Theme: ${theme}`);

输出：

Language: en, Theme: dark

总结​

JavaScript 提供了多种数据存储方式，每种方式都有其独特的用途和优势：

  • 变量：存储单个值。
  • 数组：存储有序的多个值。
  • 对象：存储键值对形式的复杂数据。
  • 本地存储：持久化存储数据。
  • 会话存储：临时存储会话数据。

选择合适的数据存储方式可以提高代码的可读性和性能。

附加资源与练习​

练习 1​

创建一个对象 book，包含书名、作者和出版年份，并将其存储到本地存储中。

练习 2​

编写一个函数，将数组 [1, 2, 3, 4, 5] 中的每个元素乘以 2，并返回新的数组。

资源推荐​