如何使用 JavaScript 操作本地存储 (localStorage 和 sessionStorage)？它们有什么区别？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

localStorage

localStorage 提供了在浏览器中存储键值对的机制，这些数据即使在浏览器关闭后仍然保留，除非被手动清除或浏览器数据被清除。

常用方法：

localStorage.setItem(key, value)：设置指定键的值。键和值都会被转换为字符串。
localStorage.getItem(key)：获取指定键的值。如果键不存在，返回 null。
localStorage.removeItem(key)：删除指定键的值。
localStorage.clear()：清除所有存储的数据。
localStorage.key(index): 根据索引获取键名。
localStorage.length: 返回存储的键值对数量。

示例：

// www.javascriptcn.com code example
// 存储数据
localStorage.setItem('username', 'John Doe');
localStorage.setItem('age', 30);

// 获取数据
const username = localStorage.getItem('username');
const age = localStorage.getItem('age');
console.log(username, age);  // 输出：John Doe 30

// 删除数据
localStorage.removeItem('age');

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

sessionStorage

sessionStorage 与 localStorage 类似，也用于存储键值对，但它的生命周期仅限于当前会话（即浏览器标签页或窗口）。当标签页或窗口关闭时，sessionStorage 中的数据会被清除。

常用方法（与 localStorage 相同）：

sessionStorage.setItem(key, value)
sessionStorage.getItem(key)
sessionStorage.removeItem(key)
sessionStorage.clear()
sessionStorage.key(index)
sessionStorage.length

示例：

// 存储数据
sessionStorage.setItem('token', 'your_auth_token');

// 获取数据
const token = sessionStorage.getItem('token');
console.log(token); // 输出： your_auth_token

// 关闭浏览器标签页/窗口后， token 就会被清除

区别

生命周期： localStorage 数据持久存在，除非手动清除；sessionStorage 数据仅在当前会话期间有效。
作用域： localStorage 在同一域名下的所有页面共享；sessionStorage 每个标签页或窗口都有自己独立的存储空间。
应用场景：
- localStorage 适合存储需要长期保存的用户设置、用户状态等信息。
- sessionStorage 适合存储临时性的会话数据，例如用户的登录状态、表单数据等。

本题详细解读

localStorage 的详细说明

localStorage 是 Web Storage API 的一部分，提供了一种在浏览器端存储数据的机制，这些数据不会随着浏览器的关闭而丢失。它采用键值对的形式存储数据，键和值都必须是字符串类型。

使用细节：

数据存储： localStorage.setItem(key, value) 将 value 转换为字符串，然后存储。存储的对象会被隐式地调用 toString() 方法转化为 "[object Object]"，因此存储对象时需要使用 JSON.stringify() 将对象转换为字符串。
数据读取： localStorage.getItem(key) 返回键 key 对应的字符串值。如果键不存在，则返回 null。如果存储的是 JSON 字符串，则需要用 JSON.parse() 将字符串转换为 JavaScript 对象。
数据删除： localStorage.removeItem(key) 删除键 key 对应的数据。
数据清除： localStorage.clear() 会清除所有 localStorage 中存储的数据。
遍历： 不能直接遍历 localStorage, 要获取所有的 key 可以使用 localStorage.key(index) 和 localStorage.length，再配合循环来操作。
容量限制： localStorage 有大小限制，通常为 5MB 或 10MB，具体大小取决于浏览器。
安全性： 虽然 localStorage 存储的数据可以在客户端访问，但仍应避免存储敏感信息，因为它不是一个安全的存储机制。
同源策略： localStorage 受同源策略限制，只有同一域名下的页面才能共享访问。

示例：

// 存储对象（需要先转换为 JSON 字符串）
const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// 获取对象（需要先转换为 JavaScript 对象）
const userString = localStorage.getItem('user');
const storedUser = JSON.parse(userString);
console.log(storedUser.name, storedUser.age); // 输出：Alice 25

sessionStorage 的详细说明

sessionStorage 同样是 Web Storage API 的一部分，与 localStorage 的主要区别在于其生命周期。 sessionStorage 的数据仅在当前会话期间有效，当浏览器标签页或窗口关闭时，数据会被清除。

使用细节：

数据存储、读取、删除、清除： 与 localStorage 类似，使用 setItem, getItem, removeItem, clear 等方法，并有相同的数据类型和存储大小限制。
生命周期： 数据存储的生命周期与浏览器标签页或窗口的生命周期相同。关闭标签页或窗口，存储的数据都会被清除。
作用域： 每个标签页或窗口都有自己独立的 sessionStorage 存储空间，不会互相干扰。
同源策略： 与 localStorage 相同，也受同源策略限制。

适用场景：

临时数据： 存储页面会话过程中使用的临时数据，例如表单输入，用户登录状态等。
单次会话： 确保数据仅在当前会话期间有效，避免数据在会话结束后残留。

示例：

sessionStorage.setItem('form_data', JSON.stringify({ name: 'Test', email: 'test@example.com' }));
// 在页面刷新或打开新标签页时，此数据将被清除

总结

（本题不需要总结）