LocalStorage和sessionStorage简介

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

介绍

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

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

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

先决条件

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

第 1 步 — 了解 localStorage 与 sessionStorage

localStorage 和 sessionStorage 几乎相同并且具有相同的 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');

现在，key 的 localStorage 值为 '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 转换回对象。 所以 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 {
  // ...
}

您可以在 if 和 else 语句中包含要应用的代码。 您可能想要遍历 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() 对于使用 for 循环遍历 localStorage 非常有用。 并非所有浏览器都支持 localStorage。

第 7 步 — 检查支持

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

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

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

结论

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

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

取自“https://cainiaojiaocheng.com/index.php?title=LocalStorage和sessionStorage简介&oldid=32447”
Powered by MediaWiki