首页 » Web API » JavaScript sessionStorage

JavaScript sessionStorage

摘要：在本教程中，您将学习如何使用 JavaScript sessionStorage 仅在会话期间存储数据。

JavaScript sessionStorage 简介

sessionStorage 对象仅存储会话数据。这意味着存储在 sessionStorage 中的数据将在浏览器关闭时被删除。

页面会话持续时间与网页浏览器打开时间一样长，并且会在页面刷新后继续存在。

当您在新标签页或窗口中打开页面时，网页浏览器会创建一个新的会话。

如果您使用相同的 URL 在多个标签页或窗口中打开页面，网页浏览器会为每个标签页或窗口创建一个单独的 sessionStorage。因此，存储在一个网页浏览器标签页中的数据无法在另一个标签页中访问。

当您关闭标签页或窗口时，网页浏览器会结束会话并清除 sessionStorage 中的数据。

存储在 sessionStorage 中的数据特定于页面的协议。例如，同一站点 javascripttutorial.net 在使用 http 和 https 访问时具有不同的 sessionStorage。

由于 sessionStorage 数据与服务器会话绑定，因此它仅在从服务器请求页面时可用。当页面在没有服务器的情况下在本地运行时，sessionStorage 不可用。

由于 sessionStorage 是 Storage 类型的实例，因此您可以使用 Storage 的方法来管理数据

  • setItem(name, value) – 设置名称的值
  • removeItem(name) – 删除由名称标识的名称-值对。
  • getItem(name) – 获取给定名称的值。
  • key(index) – 获取给定数字位置的值的名称。
  • clear() – 删除 sessionStorage 中的所有值。

在 JavaScript sessionStorage 中管理数据

1) 访问 sessionStorage

要访问 sessionStorage，请使用 window 对象的 sessionStorage 属性

window.sessionStorageCode language: JavaScript (javascript)

由于 window 是 全局对象，因此您可以像这样简单地访问 sessionStorage

sessionStorage

2) 在 sessionStorage 中存储数据

以下代码在 sessionStorage 中存储一个名称-值对

sessionStorage.setItem('mode','dark');Code language: JavaScript (javascript)

如果 sessionStorage 具有名称为 mode 的项，则 setItem() 方法会将现有项的值更新为 dark。否则，它会插入一个新项。

3) 从 sessionStorage 中获取数据

要通过名称获取项的值，请使用 getItem() 方法。以下示例获取项“mode”的值

const mode = sessionStorage.getItem('mode');
console.log(mode); // 'dark'Code language: JavaScript (javascript)

如果没有名称为 mode 的项，则 getItem() 方法将返回 null。

4) 通过名称删除项

要通过名称删除项，请使用 removeItem() 方法。以下代码删除名称为 'mode' 的项

sessionStorage.removeItem('mode');Code language: JavaScript (javascript)

5) 迭代所有项

要迭代存储在 sessionStorage 中的所有项，请执行以下步骤

  • 使用 Object.keys() 获取 sessionStorage 对象的所有键。
  • 使用 for...of 迭代键并通过键获取项。

以下代码说明了这些步骤

let keys = Object.keys(sessionStorage);
for(let key of keys) {
  console.log(`${key}: ${sessionStorage.getItem(key)}`);
}Code language: JavaScript (javascript)

6) 删除 sessionStorage 中的所有项

存储在 sessionStorage 中的数据会在网页浏览器标签页/窗口关闭时自动删除。

此外，您可以使用 clear() 方法以编程方式删除存储在 sessionStorage 中的所有数据。

sessionStorage.clear();Code language: CSS (css)

为什么选择 JavaScript sessionStorage

sessionStorage 具有许多实际应用。以下是值得注意的应用：j

  • sessionStorage 可用于存储 Web 应用程序用户界面的状态。稍后，当用户返回页面时，您可以恢复存储在 sessionStorage 中的用户界面。
  • sessionStorage 还可用于在页面之间传递数据，而不是使用隐藏输入字段或 URL 参数。

JavaScript sessionStorage 应用

您将构建一个简单的 Web 应用程序，允许用户选择模式，即深色模式或浅色模式。默认情况下，它具有浅色模式。您将使用 sessionStorage 在页面刷新时记住模式。

如果您刷新页面，您选择的模式将恢复，因为它存储在 sessionStorage 中。

但是，如果您关闭标签页或窗口，页面将重置为 dark 模式，即默认模式。

1) 创建项目文件夹结构

首先，创建一个名为 session-storage 的新文件夹。在 session-storage 文件夹中，创建两个子文件夹：js 和 css，用于存储 JavaScript 和 CSS 文件。

其次，在 sessionStorage 文件夹中创建一个新的 index.html，在 js 文件夹中创建一个 app.js 文件，并在 css 文件夹中创建一个 style.css 文件。

2) 构建 HTML 页面

以下显示了 index.html 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript sessionStorage Demo</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <h1>JavaScript sessionStorage Demo</h1>
        <p>Click the button to switch to the dark/light mode.</p>
        <p>Refresh the page to check if the mode is saved.</p>
        <a id="theme-switcher" class="btn"></a>
    </div>
    <script src="js/app.js"></script>
</body>

</html>Code language: HTML, XML (xml)

在此 index.html 文件中，我们将 style.css 放置在头部部分，将 app.js 放置在主体部分。

页面包含一些元素。最重要的一个元素是带有 id theme-switcher 的按钮。

3) 创建 app.js 文件

首先，声明两个常量，它们将用作按钮的标签

const MOON = '🌙';
const SUN = '☀️';
Code language: JavaScript (javascript)

您将使用 SUN 作为深色模式下 theme-switcher 按钮的标签，在浅色模式下使用 MOON。

其次，为深色、浅色和默认模式声明三个常量

const DARK_MODE = 'dark';
const LIGHT_MODE = 'light';
const DEFAULT_MODE = DARK_MODE;
Code language: JavaScript (javascript)

第三，使用 querySelector() 选择按钮 theme-switcher

const btn = document.querySelector('#theme-switcher');Code language: JavaScript (javascript)

第四，定义一个新函数 setMode() 来更改模式

function setMode(mode = DEFAULT_MODE) {
    if (mode === DARK_MODE) {
        btn.textContent = SUN;
        document.body.classList.add(DARK_MODE);

    } else if (mode === LIGHT_MODE) {
        btn.textContent = MOON;
        document.body.classList.remove(DARK_MODE);
    }
}Code language: JavaScript (javascript)

在深色模式下，setMode() 将按钮更改为 SUN 并在主体元素中添加 DARK_MODE 类

在浅色模式下，setMode() 将按钮标签更改为 MOON 并从主体元素中删除 DARK_MODE 类。

以下显示了浅色模式的 CSS。背景颜色为白色，文本颜色为黑色


body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    background-color: #fff;
    color: #333;
    line-height: 1.7;
    transition: 0.2s ease-in-out;
    padding: 20px;
}Code language: CSS (css)

在深色模式下，背景颜色为黑色，文本颜色为白色

.dark {
    background-color: black;
    color: #fff;
}Code language: CSS (css)

要从浅色模式切换到深色模式，请向主体元素添加 .dark 类，反之亦然。

第五，定义 init() 函数，该函数将在页面加载时运行

function init() {
    let storedMode = sessionStorage.getItem('mode');
    if (!storedMode) {
        storedMode = DEFAULT_MODE;
        sessionStorage.setItem('mode', DEFAULT_MODE);
    }
    setMode(storedMode);
}
Code language: JavaScript (javascript)

在此函数中，我们使用 getItem() 方法检索存储在 sessionStorage 中的模式。

如果 sessionStorage 没有 mode 项，则 init() 函数会将页面切换到默认模式，即深色模式。否则，它会设置为存储在 sessionStorage 中的模式。

第六，向 theme-switcher 按钮附加一个单击事件处理程序

btn.addEventListener('click', function () {
    let mode = sessionStorage.getItem('mode');
    if (mode) {
        let newMode = mode == DARK_MODE ? LIGHT_MODE : DARK_MODE;
        setMode(newMode);
        sessionStorage.setItem('mode', newMode);
    }
});Code language: JavaScript (javascript)

单击事件处理程序会获取存储在 sessionStorage 中的模式。

如果模式项存在，它会切换模式。换句话说，浅色模式会变成深色模式，反之亦然。

然后，它使用 setItem() 方法将 sessionStorage 中的模式项更新为新的模式。

以下显示了完整的 app.js 文件

const MOON = '🌙';
const SUN = '☀️';
const DARK_MODE = 'dark';
const LIGHT_MODE = 'light';
const DEFAULT_MODE = DARK_MODE;

const btn = document.querySelector('#theme-switcher');

init();

function init() {
    let storedMode = sessionStorage.getItem('mode');
    if (!storedMode) {
        storedMode = DEFAULT_MODE;
        sessionStorage.setItem('mode', DEFAULT_MODE);
    }
    setMode(storedMode);
}

function setMode(mode = DEFAULT_MODE) {
    if (mode === DARK_MODE) {
        btn.textContent = SUN;
        document.body.classList.add(DARK_MODE);

    } else if (mode === LIGHT_MODE) {
        btn.textContent = MOON;
        document.body.classList.remove(DARK_MODE);
    }
}

btn.addEventListener('click', function () {
    let mode = sessionStorage.getItem('mode');
    if (mode) {
        let newMode = mode == DARK_MODE ? LIGHT_MODE : DARK_MODE;
        setMode(newMode);
        sessionStorage.setItem('mode', newMode);
    }
});Code language: JavaScript (javascript)

以下是最终的应用程序.

首先，您选择一个模式，例如浅色模式，sessionStorage 会保存它。

然后，您刷新页面。它将显示之前选择的模式。

要查看存储在网页浏览器中的会话存储中的数据，请单击“应用程序”选项卡，然后选择“会话存储”。

摘要

  • sessionStorage 允许您仅存储会话数据。当您关闭浏览器标签页或窗口时，浏览器会删除 sessionStorage 数据。
  • sessionStorage 是 Storage 类型的实例，因此您可以使用 Storage 类型的 方法来管理 sessionStorage 中的数据。
本教程是否有帮助？
JavaScript localStorage
先前
JavaScript localStorage
接下来
JavaScript IndexedDB
JavaScript IndexedDB