js 如何使用localStorage储存和调取缓存信息 完整代码示例

在JavaScript中，`localStorage`是一个本地存储API，用于在客户端持久化数据，如缓存用户偏好设置或会话信息。下面是一些基本操作的完整代码示例：

1. 存储数据：

// 使用键值对形式存储数据
function storeData(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}

// 示例：存储用户的用户名
let userName = 'John Doe';
storeData('username', userName);

这里我们使用 `JSON.stringify()` 将JavaScript对象转换成字符串，因为`localStorage`只能存储字符串。

2. 从存储中检索数据：

// 读取数据
function fetchData(key) {
  return JSON.parse(localStorage.getItem(key)) || null; // 如果不存在则返回null
}

// 示例：获取并显示用户名
let storedUsername = fetchData('username');
if (storedUsername) {
  console.log(`Welcome back, ${storedUsername}!`);
}

这里使用 `JSON.parse()` 将字符串还原为原始对象。

3. 删除数据：

// 删除存储的数据
function removeData(key) {
  localStorage.removeItem(key);
}

// 示例：删除用户的用户名
removeData('username');