JavaScript localStorage 本地存储的基本使用

JavaScript localStorage 本地存储的基本使用

JavaScript 的 localStorage 可以在浏览器中保存数据，即使关闭网页或重新打开浏览器，数据通常仍然存在，适合保存主题设置、用户偏好和简单的工具配置。

保存数据

使用 setItem() 可以保存键值对：

localStorage.setItem("username", "Tom");
localStorage.setItem("theme", "dark");

读取数据

使用 getItem() 可以获取已保存的内容：

const username = localStorage.getItem("username");

console.log(username);

输出：

Tom

如果指定的键不存在，getItem() 会返回 null。

删除数据

localStorage.removeItem("username");

如果需要清空当前网站的全部本地存储，可以使用：

localStorage.clear();

注意：clear() 会删除当前网站的所有 localStorage 数据，使用时需要谨慎。

保存对象

localStorage 只能直接存储字符串，可以使用 JSON 转换对象：

const user = { name: "Tom", age: 25 };

localStorage.setItem("user", JSON.stringify(user));

const data = JSON.parse(localStorage.getItem("user"));

console.log(data.name);

localStorage 非常适合开发浏览器端小工具，例如世界时钟、记账工具和基金记录页面，可以让用户刷新网页后仍然保留之前的设置。