localStorage 和 sessionStorage 介绍

笔记首页 >> 教程系列 >> localStorage 和 sessionStorage 介绍

localStorage 和 sessionStorage 介绍

介绍

在localStorage和sessionStorage对象，Web存储API的一部分，是在本地保存键/值对两个伟大的工具。使用localStorage和sessionStorage用于存储是使用 cookie 的替代方案，并且有一些优点：

数据仅保存在本地，服务器无法读取，从而消除了 cookie 存在的安全问题。
它允许保存更多数据（大多数浏览器为 10mb）。
语法很简单。

它也受所有现代浏览器的支持，因此您现在可以毫无问题地使用它。Cookie 仍然有用，尤其是在涉及身份验证时，但有时使用 CookielocalStorage或sessionStorage可能是更好的选择。

先决条件

要完成本教程，您将需要以下内容：

您的机器上安装了最新版本的 Node。要安装 Node，请按照此如何安装 Node.js教程中概述的步骤操作。
对 JavaScript 编码的基本了解，您可以在此如何在 JavaScript 中编码系列中找到。

第 1 步 – 理解`localStorage`vs`sessionStorage`

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

有了这些知识，您现在可以在localStorage.

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

您可以localStorage使用setItem()方法为对象创建条目。该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');

现在，localStorage对于价值key是'New Value'不是'Value'。

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

步骤 3 — 删除和清除条目

您可以使用该removeItem()方法删除条目。该removeItem()方法采用一个参数作为localStorage对象的键：

localStorage.removeItem(key);

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

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

localStorage.clear();

这些方法使您能够localStorage更快地移除和清除项目。但是，有一些限制localStorage。双方localStorage并sessionStorage只能存储字符串。要解决此问题，您必须使用 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.parse将转换myObj回对象。Soitem被设置myObj为一个对象，而不是一个字符串。

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

第 5 步 — 检查物品

在此步骤中，您将测试localStorage. 您可以使用if语句来检查是否localStorage持有物品或是否为空。为此，请检查的长度localStorage：

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

如果localStorage.length大于0，则localStorage对象内有项目。else如果中没有项目，请包含一个声明localStorage：

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

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

第 6 步 – 迭代项目

在localStorage与sessionStorage对象不支持的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语句来打印key和打印value到屏幕：

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

这key()对于localStorage使用for循环进行迭代非常有用。并非所有浏览器都支持localStorage.

步骤 7 — 检查支持

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

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

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

结论

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

有时，最好使用 cookie 而不是localStorage或session。什么是 Cookies 以及如何使用它们使用 JavaScript彻底涵盖了这个主题，是下一步的重要一步。

觉得文章有用？

点个广告表达一下你的爱意吧！