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