当前位置：首页 > article >正文

JavaScript 本地存储 (localStorage) 完全指南

article 2025/8/16 18:01:33

文章目录

- - JavaScript 本地存储 (localStorage) 完全指南 🔐
  - - 一、什么是 `localStorage`？💡
    - 二、如何使用 `localStorage`？🔧
    - - 1. 存储数据
      - 2. 读取数据
      - 3. 删除数据
      - 4. 清空所有数据
    - 三、存储对象和数组的技巧 🎨
    - - 1. 存储对象
      - 2. 读取对象
      - 3. 存储数组
      - 4. 读取数组
    - 四、`localStorage` 的常见应用场景 🌟
    - - 1. 保存用户设置或偏好
      - 2. 记住用户登录状态
      - 3. 保存购物车内容
    - 五、`localStorage` 的限制和注意事项 ⚠️
    - 六、总结：轻松管理浏览器存储 🔄

JavaScript 本地存储 (localStorage) 完全指南 🔐

在现代网页应用中，本地存储（localStorage）是一个非常有用的 Web API，它允许我们在用户的浏览器中存储数据，以便跨页面访问，并且数据会在浏览器会话结束后依然保持。这使得它成为在客户端存储和读取数据的理想选择，比如保存用户偏好、购物车内容或者应用状态等。

今天，我们将详细探讨如何使用 localStorage 来存储和管理数据，了解它的工作原理以及常见的使用场景。

一、什么是 `localStorage`？💡

localStorage 是 Web 存储的一部分，它允许我们将数据以键值对的形式保存在浏览器中。与 sessionStorage 不同，localStorage 存储的数据没有过期时间，它会一直保留，直到用户主动删除或浏览器清除数据为止。

永久存储：数据存储在浏览器中，直到被显式删除。
跨页面共享：同一源下（相同的协议、域名和端口），不同页面可以共享 localStorage 中存储的数据。
同一浏览器有效：数据在同一浏览器窗口中可用，但跨浏览器不可共享。

二、如何使用 `localStorage`？🔧

localStorage 提供了简洁的 API 来进行数据存取。它支持以下几种常用操作：

存储数据：通过 localStorage.setItem() 方法来存储数据。
读取数据：通过 localStorage.getItem() 方法来读取数据。
删除数据：通过 localStorage.removeItem() 删除某个存储的项。
清除所有数据：通过 localStorage.clear() 清空所有存储的数据。

1. 存储数据

我们可以使用 localStorage.setItem(key, value) 来存储数据，其中 key 是存储项的名称（字符串类型），value 是数据的值（也必须是字符串类型）。

// 存储用户名
localStorage.setItem('username', 'Alice');

2. 读取数据

要从 localStorage 中读取存储的数据，可以使用 localStorage.getItem(key)。如果键不存在，返回 null。

// 读取用户名
let username = localStorage.getItem('username');
console.log(username); // 输出: Alice

3. 删除数据

要删除存储在 localStorage 中的某项数据，可以使用 localStorage.removeItem(key)。

// 删除用户名
localStorage.removeItem('username');

4. 清空所有数据

如果我们希望清空 localStorage 中的所有数据，可以使用 localStorage.clear()。

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

三、存储对象和数组的技巧 🎨

localStorage 只能存储字符串类型的数据，但我们可以通过 JSON 来存储对象或数组。使用 JSON.stringify() 将对象或数组转化为字符串存储，使用 JSON.parse() 将字符串转化为对象或数组读取。

1. 存储对象

// 创建一个对象
let user = {name: 'Alice',age: 25
};// 将对象转为 JSON 字符串并存储
localStorage.setItem('user', JSON.stringify(user));

2. 读取对象

// 从 localStorage 获取 JSON 字符串并转换为对象
let storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name);  // 输出: Alice
console.log(storedUser.age);   // 输出: 25

3. 存储数组

// 创建一个数组
let items = ['apple', 'banana', 'cherry'];// 将数组转为 JSON 字符串并存储
localStorage.setItem('items', JSON.stringify(items));

4. 读取数组

// 从 localStorage 获取 JSON 字符串并转换为数组
let storedItems = JSON.parse(localStorage.getItem('items'));
console.log(storedItems);  // 输出: ["apple", "banana", "cherry"]

四、`localStorage` 的常见应用场景 🌟

localStorage 是一个非常强大的工具，可以用于很多实际场景，以下是一些常见的使用方式：

1. 保存用户设置或偏好

如果你希望在用户重新访问页面时，保持他们的设置或偏好（比如主题颜色、语言选择等），可以使用 localStorage 来存储这些设置。

// 用户选择了暗黑模式
localStorage.setItem('theme', 'dark');// 当页面加载时，读取主题设置
let theme = localStorage.getItem('theme');
if (theme === 'dark') {document.body.classList.add('dark-theme');
}

2. 记住用户登录状态

你可以使用 localStorage 来保存用户的登录状态或身份信息，让用户下次访问时自动登录。

// 登录时，存储用户信息
let userInfo = {username: 'Alice',token: 'abc123'
};
localStorage.setItem('user', JSON.stringify(userInfo));// 下次访问时检查用户是否登录
let loggedInUser = JSON.parse(localStorage.getItem('user'));
if (loggedInUser) {console.log('User is logged in:', loggedInUser.username);
}

3. 保存购物车内容

购物车内容通常会跨页面显示，使用 localStorage 可以在不同页面之间保持购物车的状态。

// 用户将商品加入购物车
let cart = ['item1', 'item2', 'item3'];
localStorage.setItem('cart', JSON.stringify(cart));// 读取购物车内容
let cartItems = JSON.parse(localStorage.getItem('cart'));
console.log(cartItems);  // 输出: ["item1", "item2", "item3"]