javascript - 您一直想知道的有关 localStorage 的一切（但您不敢问）

localStorage 是什么？

localStorage 与 sessionStorage

如何在 localStorage 上写入

如何读取 localStorage 数据

如何查找所有 localStorage 键

如何删除数据

localStorage 的缺点

localStorage 是什么？

localStorage 是窗口界面的一个只读属性，它允许我们访问 Document 源（即浏览器）的存储。它允许我们在用户浏览器上保存键值对。这是 HTML 5 中引入的，所有内容都以字符串形式存储，但我将向您展示如何保存 JSON 对象。

等等，localStorage 是只读的，但我们能存储数据吗？localStorage 是只读的，因为它是不可变的/无法被覆盖的，所以无法将其赋值给其他值，但我们可以用它来存储数据。如果这听起来让你感到困惑，别担心，继续阅读，你将看到如何使用 localStorage 轻松地在浏览器中存储和检索数据。

localStorage 与 sessionStorage

localStorage 和 sessionStorage 之间的区别在于其有效期：localStorage 数据将保留到：

• 我们删除数据。
• 用户清除浏览器数据。

如果用户使用隐身或私人浏览，localStorage 数据将不会保留。

每次重新加载页面时，sessionStorage 数据都会过期。

更新：关于 sessionStorage 生命周期，正如@arandomdev指出的：

sessionStorage 在页面重新加载后仍然有效，因为浏览器会为标签页分配一个 session，只要标签页处于打开状态，该 session 就不会被清除。只有当标签页或浏览器关闭时，才会分配新的 session，旧的 sessionStorage 才会被清除，并创建一个新的 sessionStorage。

如何在 localStorage 上写入

localStorage 上的数据以键值对的形式存储，并且必须始终为字符串。也可以通过一些变通方法来存储和检索 JSON 对象。负责在 localStorage 上写入数据的函数是setItem函数。

例子：

// Saving user access token
localStorage.setItem('token', 'ksjakdkaugdka2i163mjbdja8y1');

我们可以通过打开控制台（f12）并检查本地存储下的应用程序选项卡来检查信息是否已保存：

存储对象

在本例中，我保存的是用户的个人访问令牌，但如果我必须存储一个包含用户详细信息的对象怎么办？我们来试试：

// 1. We define an Object;
const user = {name: 'John', surname: 'Connor', id: 2};

// 2. Try to store the Object:
localStorage.setItem('user', user);

现在检查应用程序选项卡：

它确实存储了“一些东西”，但内容无法访问，所以毫无用处。如果这是一个 API 响应，我们就会丢失响应。那么，我们如何在 localStorage 中存储对象呢？

尽管 localStorage 仅适用于字符串，但我们可以通过将对象转换为字符串来使其工作：

// 1. We define an Object;
const user = {name: 'John', surname: 'Connor', id: 2};

// 2. Transform the Object to String:
const userString = JSON.stringify(user);

// 3. Store the object:
localStorage.setItem('user', userString);

我们可以在应用程序选项卡上进行检查：

信息就在那里，而且更重要的是，可以获取。

如何读取 localStorage 数据

要读取 localStorage 数据，我们使用getItem函数，并且我们需要知道保存数据的密钥：

例子：

// Reading user access token from localStorage
const token = localStorage.getItem('token');
console.log(token);

读取对象

现在让我们使用相同的函数检索我们之前存储的对象getItem。

const user = localStorage.getItem("user");
console.log(`Welcome ${user.name} ${user.surname}`);

我们读取 localStorage 并尝试使用对象的名称和姓氏属性在控制台上记录问候消息，这就是我们得到的结果：

控制台返回的 name 和 surname 类型为 undefined。为什么？因为我们存储的不是对象，而是字符串。要从 localStorage 读取对象，我们需要将其从字符串转换为对象。我们再试一次：

// 1. Reading the object as string
let user = localStorage.getItem("user");

// 2. Parsing the string to Object
user = JSON.parse(user)

// 3. Now we can access the object properties.
console.log(`Welcome ${user.name} ${user.surname}`);

如何查找所有 localStorage 键

我们可以使用以下方法获取包含所有键的数组Object.keys：

const keys = Object.keys(localStorage);
console.log(keys);

如何删除数据

要从 localStorage 中删除数据，我们有两个选择：

 删除一项

我们可以使用以下函数removeItem：

例子：

localStorage.removeItem("token");

我们可以看到令牌不再位于 localStorage 上：

删除所有项目

我们可以使用该函数clear删除所有现有项目：

例子：

localStorage.clear();

localStorage 的缺点

正如我所展示的 localStorage，它非常容易使用，但这可能会导致我们误用：

• 不要在其上存储太多数据，因为每个域只有 5MB。
• 用户和页面上运行的任何脚本都可以轻松访问所有数据，这使其不安全。因此，请勿存储敏感信息。
• 不要试图用它来代替数据库。