Javascript 会话存储 - 初学者指南

在上一篇文章中local storage（参见上面的链接），我们讨论了它是什么以及如何使用它。今天我们将讨论session storage。它与 类似local storage，用途相同，但两者之间也存在一些区别：最大的区别在于，与 中的数据local storage永不过期不同， 中的数据session storage会在页面会话结束时被清除。另一个区别是，它是针对特定标签页的，即使对于共享同一域名的页面也是如此（打开具有相同 URL 的多个页面会session storage为每个标签页创建一个新的）。

我在本文中使用 Chrome，但对于大多数浏览器来说，访问方式session storage都类似。在 Chrome 中，打开控制台（F12），导航到Application左侧菜单中的相应Storage部分。选择Session Storage并展开下拉菜单。您应该会看到类似以下内容：

它看起来非常相似，local storage并且以相同的方式存储数据，使用key - value对。我们访问它的方式是使用以下语法：

windows.sessionStorage

// or

sessionStorage

我们有可以用来交互的方法，session storage并且可以执行如下操作：

添加项目：

sessionStorage.setItem('key', 'value');

检索项目：

sessionStorage.getItem('key');

删除一个特定项目：

sessionStorage.removeItem('key');

清除以下所有数据session storage：

sessionStorage.clear();

现在我们来写一些代码。我会使用控制台来操作，你可以跟着我一起操作。

// We store today's date in the storage
sessionStorage.setItem("weekDay", "Thursday"); 

// We set some details about the user, using an object as a value 
// First we need to convert the object to a string
const details = {name: "Arika", profession: "Web developer"}
const result = JSON.stringify(details);
// Now we set the value to the storage
sessionStorage.setItem("details", result);

会话存储应该是这样的：

现在让我们从中检索一些内容session storage，删除一项，然后清除整个存储。

// We retrieve the user details
const userDetails = sessionStorage.getItem("details");
// We convert the string back to an object
const newUserDetails = JSON.parse(userDetails);
// We delete the day from the storage
sessionStorage.removeItem("weekDay");
// We remove everything
sessionStorage.clear();

如您所见，用法非常简单。现在您可能会问自己，既然我们已经有了local storage，为什么还要使用session storage？首先，开发人员可以使用它来提高安全性，因为数据将在标签页/浏览器关闭后被删除（因此，与使用不同，之后任何第三方都无法访问该数据local storage）。另一个示例是，我们希望UI的当前状态与会话特定有关（假设用户将页面主题从亮色更改为暗色，但下次他们访问网站或打开另一个标签页时，我们希望他们看到页面的初始状态）。通常，如果您不希望数据在会话之外持续存在，则应该使用session storage。

关于会话存储，需要记住的一件非常重要的事情是：
虽然数据在关闭标签页/浏览器后会被删除，但在存储过程中，session storage它也容易受到XSS（跨站脚本）攻击（就像local storage）。因此，切勿在其中存储敏感信息（例如用户名/密码、API密钥、信用卡信息、个人信息等）。

关于会话存储需要记住的事情

• 它是特定于标签的，即使对于共享同一域的页面也是如此；
• 它只能存储字符串，因此任何其他数据类型在使用前都必须进行序列化（转换为字符串）；