Window.sessionStorage 会话存储

最新推荐文章于 2025-04-03 20:02:30 发布

「已注销」

最新推荐文章于 2025-04-03 20:02:30 发布

阅读量595

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/m0_57835615/article/details/117477297

本文介绍了Window.sessionStorage，一种用于临时保存同一浏览器窗口数据的存储方式。在浏览器窗口关闭后，sessionStorage中的数据将被删除。其特点包括生命周期与浏览器窗口同步、数据在同一窗口下可共享，并以键值对形式存储。文章详细讲解了如何存储、删除、读取和清空sessionStorage中的数据，并通过示例代码和操作演示进行了说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

特点：

1.生命周期为关闭浏览器窗口之前

2.在同一个窗口下数据可以共享

3.以键值对的形式存储数据

使用：

1.存储数据

语法格式：

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

示例：

2.删除数据

语法格式：

sessionStorage.removeItem("key");

3. 读取数据

语法格式：

sessionStorage.getItem("key");

4.清空数据

语法格式：

sessionStorage.clear();

示例：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    用户名：<input type="text" id="uname">
    年龄：<input type="text" id="uage">
    <button class="save">存储</button>
    <button class="remove">删除用户名</button>
    <button class="get">读取用户名</button>
    <button class="clear">清空</button>
    <script>
        var uname = document.querySelector('#uname');
        var uage = document.querySelector('#uage');
        var save = document.querySelector('.save');
        var remove = document.querySelector('.remove');
        var get = document.querySelector('.get');
        var clear = document.querySelector('.clear');
        save.addEventListener('click', function () {
            var infoname = uname.value;
            var infoage = uage.value;
            sessionStorage.setItem('username', infoname);
            sessionStorage.setItem('userage', infoage);
        });
        remove.addEventListener('click', function () {
            sessionStorage.removeItem('username');
        });
        get.addEventListener('click', function () {
            console.log(sessionStorage.getItem('username'));
        });
        clear.addEventListener('click', function () {
            sessionStorage.clear();
        });
    </script>

</html>

效果图：