一篇文章告诉你什么是 JavaScript LocalStorage

localStorage 是 JavaScript 提供的一个 Web Storage Api，允许在用户浏览器中本地存储数据，且数据在浏览器会话结束后仍然保留（即使关闭浏览器，数据也不会被删除）。它为前端开发者提供了一种简单的方法来存储键值对，且具有一定的持久性。

以下是对 localStorage 的详细介绍：

1. 特点

持久性：数据会一直保存在用户的浏览器中，除非被手动清除。
键值对存储：以键值对的形式存储数据，所有数据都是字符串类型。
同源访问限制：只能在相同的域名和协议下访问，不能跨域使用。
容量限制：一般限制在 5MB 左右（不同浏览器可能有所不同）。

2. 基本操作

localStorage 提供了几种简单的操作方法，主要包括存储数据、读取数据、删除数据和清空数据。

2.1 存储数据

使用 localStorage.setItem(key, value) 方法来存储数据，其中 key 是数据的键，value 是存储的值，注意 value 必须为字符串类型。

localStorage.setItem("username", "JohnDoe");
localStorage.setItem("age", "30");

2.2 读取数据

使用 localStorage.getItem(key) 方法来读取数据，返回指定键的值。如果键不存在，返回 null。

Let username = localStorage.getItem("username");
console.log(username); // 输出：JohnDoe

2.3 删除数据

使用 localStorage.removeItem(key) 方法删除指定键的数据。

localStorage.removeItem("username");

2.4 清空所有数据

使用 localStorage.clear() 方法清空所有 localStorage 数据。

localStorage.clear();

3. 示例：存储和读取对象

localStorage 只能存储字符串，若要存储对象，可以先将对象转换为 JSON 字符串，再存入 localStorage。同理，读取时需要将 JSON 字符串解析成对象。

let user = {
    name: "JohnDoe",
    age: 30
};

// 存储对象
localStorage.setItem("user", JSON.stringify(user));

// 读取对象
let storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // 输出：JohnDoe

4. 遍历 localStorage

可以使用 localStorage.length 获取存储的键数量，并通过索引和 key() 方法来遍历。

for (let i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i);
    let value = localStorage.getItem(key);
    console.log(key, value);
}

5. 使用场景

localStorage 常用于需要持久化的数据存储，如用户设置、购物车数据、偏好设置等。这些数据不需要频繁更新、且没有敏感性要求，适合保存在客户端。

6. 注意事项

容量限制：一般为 5MB，数据量大时可能受到限制，建议存储小规模数据。
数据安全性：localStorage 是明文存储，不能存储敏感信息（如密码、银行信息等），否则容易被恶意脚本窃取。
浏览器兼容性：现代浏览器均支持 localStorage，但早期版本 IE 可能不支持。可以使用 if (window.localStorage) 来检测浏览器是否支持。

7. 常见问题

如何判断 `localStorage` 是否支持？

if (typeof(Storage) !== "undefined") {
    // 支持
} else {
    // 不支持
}

`localStorage` 和 `sessionStorage` 的区别？

localStorage：数据持久保存，浏览器关闭后数据不清除。
sessionStorage：仅在当前会话（tab 窗口）生效，关闭浏览器或标签页后清除。

8. 示例应用

下面是一个简单的示例应用，使用 localStorage 保存用户的主题偏好：

// 设置主题
function setTheme(theme) {
    document.body.className = theme;
    localStorage.setItem("theme", theme);
}

// 加载主题
function loadTheme() {
    let savedTheme = localStorage.getItem("theme");
    if (savedTheme) {
        document.body.className = savedTheme;
    }
}

// 页面加载时加载主题
window.onload = loadTheme;

总结

localStorage 是一种轻量级的客户端存储方式，适用于存储小规模、不敏感的持久数据。在使用时应注意数据的安全性和浏览器的兼容性。