如何在 JavaScript 中使用本地存储?

在 JavaScript 中，我们可以使用本地存储来存储一些与当前域相关联的数据，这些数据在关闭当前页面后不会被删除。根据存储位置的不同，我们可以将本地存储分为两种类型：localStorage 和 sessionStorage。

localStorage

localStorage 存储在浏览器中(如客户端的硬盘) ，而且不会随着浏览器窗口的关闭而消失，一直存在本地，直到我们手动清除。

如何使用

我们可以通过 localStorage.setItem(key, value) 来添加一个 key-value ，通过 localStorage.getItem(key) 来获取值。

// 添加一个 key-value
localStorage.setItem("name", "John");

// 获取一个 key 对应的值
let name = localStorage.getItem("name");

console.log(name); // 输出 "John"

清除 localStorage

我们可以通过 localStorage.clear() 来清除所有的保存在 localStorage 中的数据。

localStorage.clear();

sessionStorage

sessionStorage 的数据是针对某个浏览器窗口(tab)的，也就是说只有在同一个窗口下才能够获取到。如果在新的窗口或者新的标签中打开相同的网址，之前保存在 sessionStorage 中的数据将无法获取。

如何使用

我们可以通过 sessionStorage.setItem(key, value) 来添加一个 key-value ，通过 sessionStorage.getItem(key) 来获取值。

// 添加一个 key-value
sessionStorage.setItem("name", "John");

// 获取一个 key 对应的值
let name = sessionStorage.getItem("name");

console.log(name); // 输出 "John"

清除 sessionStorage

我们可以通过 sessionStorage.clear() 来清除所有的保存在 sessionStorage 中的数据。

sessionStorage.clear();

总结

在编写 Web 应用时，我们经常需要存储一些数据，以便在后续的使用中获取和操作。通过 localStorage 和 sessionStorage，我们可以轻松地在浏览器中存储和获取数据。需要注意的是，存储在 localStorage 或 sessionStorage 中的数据是明文的，不能存储敏感数据。