javascript - 关于 localStorage 的一切

芝麻凛 2021年11月24日 422次浏览

javascript - 关于 localStorage 的一切

什么是localStorage?

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

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

localStorage 与 sessionStorage

localStoragesessionStorage 之间的区别在于到期日期: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 并在控制台上使用对象的 namesurname 属性来控制台记录消息:

图片说明

控制台为 namesurname 返回 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
  • 用户和页面上运行的任何脚本都可以轻松访问所有数据,这使其不安全。所以不要存储敏感信息。
  • 不要想着将其用作数据库的替代品。