LocalStorage和sessionStorage简介
介绍
localStorage
和 sessionStorage
对象是 Web 存储 API 的一部分,是用于在本地保存键/值对的两个出色工具。 使用 localStorage
和 sessionStorage
进行存储是使用 cookie 的替代方法,并且有一些优点:
- 数据只保存在本地,服务器无法读取,消除了cookies存在的安全问题。
- 它允许保存更多数据(大多数浏览器为 10mb)。
- 语法很简单。
所有现代浏览器也都支持它,因此您现在可以毫无问题地使用它。 Cookie 仍然有用,尤其是在身份验证方面,但有时使用 localStorage
或 sessionStorage
可能是更好的选择。
先决条件
要完成本教程,您将需要以下内容:
- 您的机器上安装了最新版本的 Node。 要安装 Node,请按照 如何安装 Node.js 教程中概述的步骤进行操作。
- 对 JavaScript 编码的基本了解,您可以在本 如何在 JavaScript 中编码 系列中找到。
第 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 使用它们彻底涵盖了这个主题,是一个很好的下一步。