JavaScript sessionStorage

javascript sessionStorage 对象是 window 对象的一个属性，所有现代浏览器都拥有它。页面的协议、主机名和端口与 sessionStorage 中的任何信息相关联。每个窗口都有自己的会话存储。javascript sessionStorage 是一种可以可靠地在用户端维护数据的方法。

在 JavaScript 中，我们使用 getItem() 方法来访问始终保存在 session storage 属性中的元素。storage 对象具有 getItem() 方法。它可以是 javascript session Storage 对象或 local Storage 对象。

JavaScript sessionStorage 的方法

要从 javascript sessionStorage 获取元素，我们必须首先创建一个元素并将其保存在 session storage 中。之后我们可以在稍后将其取回。storage 对象有四个方法：setItem()、getItem()、removeItem() 和 clear()。

• setItem(): 它用于设置 sessionStorage 元素的信息。
• getItem(): 它用于检索和显示 session storage 元素。
• removeItem(): 它用于删除特定的 session storage 元素。
• key(): 它用于获取 sessionStorage 位置数据的名称。
• clear(): 它用于删除或清除 sessionStorage 元素的所有项。

JavaScript 中的 sessionStorage 有何作用

sessionStorage 可用于多种不同方式。以下是最重要的几种：

• 网页的界面可以保存在 sessionStorage 中。
• 当用户稍后返回该页面时，您可以使用 sessionStorage 来恢复保存的用户界面。
• 我们还可以使用 sessionStorage 在页面之间传输数据，而不是使用隐藏的输入字段或 URL 参数。

语法

以下语法展示了带有方法的 javascript sessionstorage 方法。

• 此语法展示了带有 set item 方法的 javascript sessionstorage。

• 此语法展示了带有 display item 方法的 javascript sessionstorage。

• 此语法展示了带有 remove item 方法的 javascript sessionstorage。

• 此语法展示了带有 clear item 方法的 javascript sessionstorage。

操作 JavaScript sessionStorage 中的数据

1) 使用 sessionStorage

使用 window 对象的 window.sessionStorage 属性来访问 sessionStorage。

由于 window 是全局对象，您可以使用以下语法轻松访问 sessionStorage。

或

2) 在 sessionStorage 中存储数据

通过以下操作将键值对存储在 sessionStorage 中：

如果 sessionStorage 中已存在名为 variable 的项，则 setItem() 方法可以修改该现有对象的值为 TpointTech。否则，将插入一个新项。

3) 从 sessionStorage 获取信息

getItem() 方法可以通过名称检索项的值。下面的示例获取项“name”的值：

如果名称变量与任何项都不匹配，getItem() 方法可以返回 null。

4) 按名称删除一个项

使用 removeItem() 函数按名称删除一个项。以下代码删除了名为“name”的对象：

5) 重复步骤 5 以遍历每个项

应遵循以下步骤来遍历 sessionStorage 中的每个项：

• 要检索 sessionStorage 对象中的所有键，请使用 object.keys()。
• 要通过键获取元素并遍历键，请使用 for...of。

以下代码展示了这些步骤：

6) 清除 sessionStorage 中的所有内容。

当用户关闭浏览器标签页或窗口时，sessionStorage 中收集的信息将立即被删除。

此外，您还可以通过编程方式使用 clear() 方法删除 sessionStorage 中的所有信息。

示例

以下示例展示了带有不同方法的 javascript sessionstorage。

示例 1

该示例展示了带有 set 和 get 元素方法的 javascript sessionstorage。我们可以创建一个数组并使用 session storage 对象设置数据。然后，使用对象调用 getItem() 方法并显示信息。

输出

图片显示了 session storage 对象的 set item 值。

示例 2

该示例展示了带有 set 和 get 元素方法的 javascript sessionstorage。我们可以使用对象调用 getItem() 方法并显示日期和时间信息。数组值使用 get 和 set 方法，但日期值直接设置数据。

输出

图片显示了 session storage 对象的 get item 和值，并以输出形式显示。

示例 3

该示例展示了带有 remove items 方法的 javascript sessionstorage。我们可以使用 setItem() 方法获取对象并显示信息。removeItem(data) 用于删除 javascript sessionstorage 的 item 方法。

输出

图片显示了已移除的 item 和 session storage 对象的其他值，并以输出形式显示。

示例 4

该示例展示了带有 remove items 方法的 javascript sessionstorage。我们可以使用 get 和 set 方法获取对象并显示信息。clear() 用于清除和删除 javascript sessionstorage 的 item 方法。值显示为 null 输出。

输出

图片显示了 clear session storage 对象，并以输出形式显示。

示例 5

该示例展示了带有 get、set 和 display items 方法的 javascript sessionstorage。session 的 key 用于显示 javascript sessionstorage 中的所有对象。我们可以看到 key 方法显示使用 setItem() 方法设置的可用信息。

输出

图片显示了 session storage 对象的完整信息，并以输出形式显示。

示例 6

该示例展示了带有不同方法的 javascript sessionstorage 来获取和显示信息。我们可以看到带有暗模式的 init 方法，以暗色背景显示可用数据。我们可以使用浅色模式，在网页上使用白色或浅色背景。

输出

图片显示了 session storage 对象的信息，带有模式，并以输出形式显示。

结论

您只能使用 sessionStorage 为一个会话存储数据。当您退出浏览器标签页或窗口时，浏览器将删除 sessionStorage 数据。

由于 sessionStorage 是 Storage 系统的一个对象，您可以使用 Storage 类型的方法来管理 sessionStorage 中的数据。