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

这个和 Vue2 笔记中的一样。

这个是不属于 Vue 的，是属于 Javascript 的 Web 存储 API 的一部分，但是在实际的开发中是必不可少的，所以在这里介绍一下。

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

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

下面的代码直接在脚本中使用即可。

21.1 localStorage

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

使用的时候，直接在 Vue脚本 或 JS 脚本中使用即可：

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

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

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

21.2 保存复杂数据类型

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

内容未完......

查看完整内容 →