LocalStorage和sessionStorage简介

来自菜鸟教程
跳转至:导航、​搜索

介绍

localStoragesessionStorage 对象是 Web 存储 API 的一部分,是用于在本地保存键/值对的两个出色工具。 使用 localStoragesessionStorage 进行存储是使用 cookie 的替代方法,并且有一些优点:

  • 数据只保存在本地,服务器无法读取,消除了cookies存在的安全问题。
  • 它允许保存更多数据(大多数浏览器为 10mb)。
  • 语法很简单。

所有现代浏览器也都支持它,因此您现在可以毫无问题地使用它。 Cookie 仍然有用,尤其是在身份验证方面,但有时使用 localStoragesessionStorage 可能是更好的选择。

先决条件

要完成本教程,您将需要以下内容:

第 1 步 — 了解 localStoragesessionStorage

localStoragesessionStorage 几乎相同并且具有相同的 API。 不同之处在于,使用 sessionStorage 时,数据仅保留到窗口或选项卡关闭为止。 使用 localStorage,数据会一直保留到用户手动清除浏览器缓存或您的 Web 应用程序清除数据为止。 本教程以 localStorage 为特色,但 sessionStorage 的语法相同。

有了这些知识,您现在可以在 localStorage 中创建、读取和更新键/值对。

第 2 步 — 创建、读取和更新条目

您可以使用 setItem() 方法为 localStorage 对象创建条目。 setItem() 方法有两个参数,key 和对应的值:

let key = 'Item 1';
localStorage.setItem(key, 'Value');

要读取条目,请使用 getItem() 方法。 getItem() 方法采用一个参数,该参数必须是键。 此函数将返回相应的值作为字符串:

let myItem = localStorage.getItem(key);

此代码设置 myItem 等于 'Value',这是 key 的对应值。

使用 setItem() 方法更新条目。 同样,它需要两个参数。 key 参数将是一个现有的键,而 value 参数将是一个新值:

localStorage.setItem(key, 'New Value');

现在,keylocalStorage 值为 'New Value' 而不是 'Value'

您可以在 localStorage 对象中创建、读取和更新条目。 您还可以删除单个条目并清除 localStorage 中的所有条目。

第 3 步 — 删除和清除条目

您可以使用 removeItem() 方法删除条目。 removeItem() 方法采用一个参数,该参数将是 localStorage 对象的键:

localStorage.removeItem(key);

您也可以清除localStorage中的所有项目。 这可以通过 clear() 方法完成:

以下是清除存储在 localStorage 中的所有内容的方法:

localStorage.clear();

这些方法使您能够更快速地从 localStorage 中删除和清除项目。 但是,localStorage 有一些限制。 localStoragesessionStorage 都只能存储字符串。 要解决此问题,您必须使用 JSON 方法。

第 4 步 — 使用 JSON 存储非字符串值

localStorage 只能存储字符串值。 如果要将对象或数组作为值存储在 localStorage 中,可以使用 JSON.stringify() 将它们转换为字符串。 在 localStorage 中创建或更新键/值对时,将 JSON.stringify() 与对象或数组一起用作参数:

let myObj = { name: 'Skip', breed: 'Labrador' };
localStorage.setItem(key, JSON.stringify(myObj));

尽管 myObj 是一个对象,但 JSON.stringify(myObj) 将其转换为字符串。 所以 myObj 现在是一个有效的 localStorage 值。

要读取和返回字符串化的值,请使用 JSON.parse() 方法。 JSON.parse() 方法采用 JSON 字符串并将它们转换为 JavaScript 对象。 JSON.parse().getItem() 作为它的参数:

let item = JSON.parse(localStorage.getItem(key));

现在 item 设置为等于 key 的值。 在前面的代码片段中,key 的值被设置为 myObj 的字符串化版本。 使用 JSON.parsemyObj 转换回对象。 所以 item 设置为等于 myObj 作为对象,而不是字符串。

能够使用 JSON.stringify 将数组和对象转换为字符串并使用 JSON.parse 将它们转换回来非常有用。 您还需要知道如何检查 localStorage 是否为空。

第 5 步 — 检查项目

在此步骤中,您将测试 localStorage 中是否存在项目。 您可以使用 if 语句来检查 localStorage 是否正在持有项目或是否为空。 为此,请检查 localStorage 的长度:

if (localStorage.length > 0) {
  // ...
}

如果 localStorage.length 大于 0,则 localStorage 对象中有项目。 如果 localStorage 中没有项目,请包含 else 语句:

if (localStorage.length > 0) {
  // ...
} else {
  // ...
}

您可以在 ifelse 语句中包含要应用的代码。 您可能想要遍历 localStorage 中的项目。

第 6 步 - 迭代项目

localStoragesessionStorage 对象不支持 forEach 方法。 要遍历 localStorage 中的项目,请使用 for 循环:

for (let i = 0; i < localStorage.length; i++){

}

key() 方法将整数作为参数并返回相应的键。 使用 for 循环,将 i 作为 key() 的整数传入:

for (let i = 0; i < localStorage.length; i++){
  let key = localStorage.key(i);
}

使用 getItem 方法返回 key 对应的值:

for (let i = 0; i < localStorage.length; i++){
  let key = localStorage.key(i);
  let value = localStorage.getItem(key);
}

创建一个 console.log 语句以将 keyvalue 都打印到屏幕上:

for (let i = 0; i < localStorage.length; i++){
  let key = localStorage.key(i);
  let value = localStorage.getItem(key);
  console.log(key, value);
}

key() 对于使用 for 循环遍历 localStorage 非常有用。 并非所有浏览器都支持 localStorage

第 7 步 — 检查支持

您可以通过使用 if 语句检查 window 对象上是否可用来测试 localStorage 支持:

if (window.localStorage) {
  // localStorage supported
}

您还可以使用 Can I use... 网站检查主流浏览器对 localStorage 的支持。

结论

您可以使用 localStoragesessionStorage 对象来存储键/值对。 有一些方法可以让您与 localStorage 中的项目进行交互。 通过本教程,您在 localStorage 中创建、删除和更新了条目。 您还使用 JSON 方法将数组和对象数据转换为字符串并返回。

有时,最好使用 cookie 而不是 localStoragesession什么是 Cookie 以及如何使用 JavaScript 使用它们彻底涵盖了这个主题,是一个很好的下一步。