javascript - 关于 localStorage 的一切

什么是localStorage？

localStorage 是窗口界面的只读属性，它允许我们访问文档源（浏览器）的存储。它允许我们在用户浏览器上保存键值对。在 HTML 5 中正式引入，并且所有它都存储为字符串。

localStorage 是只读的，我们存储数据？localStorage 是只读的，因为它是不可变的/不能被覆盖，因此无法将其分配给另一个值，但我们可以使用它来存储数据。如果这听起来让人感到疑惑，请继续往下看，将介绍如何使用 localStorage 轻松地将数据存储和检索到浏览器。

localStorage 与 sessionStorage

localStorage 和 sessionStorage 之间的区别在于到期日期：localStorage 数据将持续到：

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

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

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

但是实际上 sessionStorage 在页面重新加载后仍然存在，因为浏览器为该选项卡分配了一个 session，并且只要它打开，该 session 就不会被清除。仅当选项卡或浏览器关闭时，才会分配新 session ，并清除旧sessionStorage并创建新 session。

如何在localStorage上写入

localStorage 上的数据存储为 key-value，并且必须始终为字符串。还可以通过一些解决方法来存储和检索 JSON 对象。负责在localStorage 上写入的setItem函数就是函数。

例子：

// 保存用户访问 token
localStorage.setItem('token', 'ksjakdkaugdka2i163mjbdja8y1');

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

存储对象

在这种情况下，我正在保存用户的个人访问令牌，但是如果我必须存储一个包含用户详细信息的对象怎么办：

// 1.定义一个对象
const user = {name: 'John', surname: 'Connor', id: 2};

// 2. 尝试存储对象
localStorage.setItem('user', user);

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

它已经存储了“一些东西”，但它的内容不可访问，所以它没用，如果这是一个 API响应，就会丢失响应。那么我们如何在localStorage中存储对象呢？

虽然 localStorage 仅适用于字符串，因此我们可以使其工作将对象转换为字符串：

const user = {name: 'John', surname: 'Connor', id: 2};

const userString = JSON.stringify(user);

localStorage.setItem('user', userString);

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

信息已经存进去了，更重要的是，已经可以访问到它了。

如何读取localStorage数据

要读取 localStorage 数据，可以使用getItem函数，需要知道保存数据的键：

例子：

// 从本地存储读取用户访问 token
const token = localStorage.getItem('token');
console.log(token);

读取对象

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

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

我们读取 localStorage 并在控制台上使用对象的 name 和 surname 属性来控制台记录消息：

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

let user = localStorage.getItem("user");

user = JSON.parse(user)

console.log(`Welcome ${user.name} ${user.surname}`);

如何找到所有 localStorage 的 key

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

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

如何删除数据

要从 localStorage 中删除数据，我们有 2 个选项：

删除一项

我们可以使用函数removeItem：

例子：

localStorage.removeItem("token");

我们可以看到 localStorage 上已经没有 token 了 ：

删除所有项目

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

例子：

localStorage.clear();

localStorage 的缺点

localStorage 它非常易于使用，但这可能会导致我们滥用：

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