Vue 中使用 localStorage

localStorage 基本概念

localStorage 是一种 Web 存储机制，提供了一个本地存储空间，可以将数据存储在用户的浏览器中。它的数据会在浏览器关闭后继续存在，直到明确地删除。

• 存储方式：键值对（key-value）。
• 存储限制：大约 5MB（不同浏览器限制可能略有不同）。
• 生命周期：数据是持久化的，除非用户手动清除，或者代码中明确调用 localStorage.removeItem() 或 localStorage.clear()。

localStorage.setItem(key, value)
localStorage.setItem('username', 'JohnDoe');


localStorage.getItem(key)
let username = localStorage.getItem('username');
console.log(username);  // 输出 'JohnDoe'

localStorage.removeItem('username');
localStorage.clear();  // 清空所有存储
console.log(localStorage.length);  // 输出存储的项数

let firstKey = localStorage.key(0);
console.log(firstKey);  // 输出第一个存储项的键

存储类型： localStorage 只能存储字符串，如果要存储对象或数组，需要先将其转为 JSON 字符串：

const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

读取时记得转换回对象：

const user = JSON.parse(localStorage.getItem('user'));

• 安全性： localStorage 存储的数据是明文存储的，不建议存储敏感数据，如密码、密钥等。对于需要安全存储的敏感信息，应该使用加密算法。

• 浏览器兼容性： localStorage 受限于浏览器的同源策略，因此每个域名的存储空间是独立的。不同浏览器也可能有不同的存储限制。

• 存储空间限制： 大部分浏览器对 localStorage 的最大存储量限制为 5MB（可能因浏览器而异），如果数据超过限制，会抛出异常。