localStorage 本地缓存

localStorage 是一种在客户端（通常是浏览器）存储数据的方式，它允许网站存储数据在用户的计算机上，并且这些数据可以在浏览器关闭后仍然保留。它非常适合存储一些用户偏好设置、表单数据、以及其他需要在用户下次访问时保留的信息。

基本用法

存储数据

你可以使用 localStorage.setItem(key, value) 方法来存储数据。其中 key 是数据的名称，value 是要存储的数据值（通常是一个字符串，但也可以是其他类型的数据，存储时会转换为字符串）。

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

获取数据

使用 localStorage.getItem(key) 方法可以获取之前存储的数据。

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

移除数据

使用 localStorage.removeItem(key) 方法可以移除存储的数据。

localStorage.removeItem('username');

清除所有数据

使用 localStorage.clear() 方法可以清除 localStorage 中的所有数据。

localStorage.clear();

存储复杂数据类型

由于 localStorage 只能存储字符串，当你需要存储复杂数据类型（如对象或数组）时，你需要先将它们转换为字符串（通常使用 JSON.stringify()），然后在读取时再将字符串转换回原始数据类型（使用 JSON.parse()）。

存储对象

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

获取对象

let userStr = localStorage.getItem('user');
let userObj = JSON.parse(userStr);
console.log(userObj.name); // 输出: JohnDoe

注意事项

1. 存储限制：不同的浏览器对 localStorage 的存储大小有不同的限制，通常在 5MB 到 10MB 之间。
2. 同源策略：localStorage 数据只能由创建它的同源（即相同的协议、域名和端口）访问。
3. 数据安全性：localStorage 数据不是加密的，因此不要在其中存储敏感信息（如密码）。
4. 持久性：localStorage 数据会一直保留，直到用户手动清除（通过浏览器设置或调用 localStorage.clear()）。

示例

下面是一个简单的示例，演示如何使用 localStorage 存储和获取用户登录状态：

// 存储用户登录状态
function setLoginStatus(isLoggedIn) {
    localStorage.setItem('isLoggedIn', isLoggedIn.toString());
}

// 获取用户登录状态
function getLoginStatus() {
    return localStorage.getItem('isLoggedIn') === 'true';
}

// 示例使用
setLoginStatus(true);
console.log(getLoginStatus()); // 输出: true

通过使用 localStorage，你可以轻松地在客户端存储和检索数据，从而提供更好的用户体验。