JavaScript教程 - 21 浏览器的本地存储

浏览器的本地存储是属于 Javascript 的 Web 存储 API 的一部分，可以让我们在浏览器本地存储一些数据。

例如在登录系统的时候，获取的 token 就需要保存下来 ，在后面发起请求的时候都需要携带 token。还有搜索功能，会有一些搜索的历史记录，这些历史记录一般也是使用浏览器的本地存储功能。

常用的存储方式有 localStorage 和 sessionStorage ，它们都是以键值对的形式存储。

21.1 localStorage

• 存储位置：localStorage 的数据存储在用户的浏览器中，没有过期时间，即使浏览器关闭，数据也会保留。
• 存储限制：大多数现代浏览器支持至少 5MB 的存储空间。
• 用途：适用于存储需要长期保存的数据，如用户设置、主题偏好等。

举个栗子：

// 存储数据
localStorage.setItem("token", "86a1b80d092c403e88be91b586f0d64d");

// 读取数据
const token = localStorage.getItem("token");
console.log(token); // 输出: 86a1b80d092c403e88be91b586f0d64d

// 删除数据
localStorage.removeItem("token");

// 清空数据，会清空所有的key-value
localStorage.clear();

localStorage 中的数据需要手动清除浏览器缓存或者使用上面的 API 才可以删除。

21.2 保存复杂数据类型

但是在存储数据的时候需要注意，localStorage 只能保存字符串，例如你保存对象数据，会调用对象的 toString() 转换为字符串，会变成 [object Object] 字符串 ，导致保存后无法获取数据。

所以在保存复杂类型数据时，推荐将其转换为 JSON 字符进行保存。

举个栗子：

let user = {  
  name: "doubi",  
  age: 30 
};  
  
// 使用 JSON.stringify() 将对象转换为字符串  
let userString = JSON.stringify(user);  
  
// 保存到 localStorage  
localStorage.setItem('user', userString);

获取数据时，将 JSON 字符串再转换为对象：

// 从 localStorage 读取字符串  
let userString = localStorage.getItem('user');  
  
// 使用 JSON.parse() 将字符串转换回对象  
let user = JSON.parse(userString);  
  
console.log(user.name); // 输出: doubi

21.3 sessionStorage

• 存储位置：sessionStorage 的数据也存储在用户的浏览器中，但它在浏览器会话结束时（即浏览器标签页关闭时）会被清除。
• 存储限制：与 localStorage 相同，大多数现代浏览器支持至少 5MB 的存储空间。
• 用途：适用于存储那些在页面刷新时仍然需要保持的数据，但在用户关闭浏览器标签页后不再需要的数据，如会话令牌、表单数据等。

sessionStorage 和 localStorage 的 API 是一样的：

// 存储数据  
sessionStorage.setItem('username', 'doubi');  
  
// 读取数据  
const username = sessionStorage.getItem('username');  
console.log(username); // 输出: doubi  
  
// 删除数据
sessionStorage.removeItem('username');

// 清空数据，会清空所有的key-value
sessionStorage.clear();

21.4 查看本地储存

在浏览器中，可以通过开发者工具查看本地存储的数据。

例如我访问京东网站，使用开发者工具，查看本地存储的数据：