关于js本地Window sessionStorage 的一些了解

最新推荐文章于 2024-02-19 15:48:02 发布

风尚云网

最新推荐文章于 2024-02-19 15:48:02 发布

阅读量772

点赞数 5

分类专栏：风尚学js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/zsx0806/article/details/122653029

版权

风尚学js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一：定义和使用

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，

在关闭窗口或标签页之后将会删除这些数据。

提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性，该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。

二：语法

window.sessionStorage

保存数据语法：

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

读取数据语法：

var lastname = sessionStorage.getItem("key");

删除指定键的数据语法：

sessionStorage.removeItem("key");

删除所有数据：

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>
    <div id="mm"></div>
    <br> <button id="btn">登录</button><br>
    <br>
    <button id="del">退出登录</button>
    <br>
    用户名：
    <input id="user" type="text" placeholder="你的用户名">
    <br>
    密码：
    <input id="pwd" type="text" placeholder="密码">
</body>
<script>

    //存储
    var user = document.getElementById("user");
    var pwd = document.getElementById("pwd");

    user.onblur = function () {
        var userval = user.value;
        var username = sessionStorage.setItem("username", userval);
        console.log(userval);
    }

    pwd.onblur = function () {
        var pwdval = pwd.value;
        var username = sessionStorage.setItem("userpwd", pwdval);
        console.log(pwdval);
    }
    //获取
    var mm = document.getElementById("mm");
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        mm.innerHTML = sessionStorage.getItem("username");
    }
    // 删除
    var del = document.getElementById("del");
    del.onclick = function () {
        sessionStorage.removeItem("username");
        sessionStorage.removeItem("userpwd");
        history.go(0);
    }

    //如果有值显示，没有就跳转
    window.onload = function () {
        if (sessionStorage.getItem("username")) {
            alert("欢迎你尊敬的");
            mm.innerHTML = sessionStorage.getItem("username");
        }
        else {
            alert("请登录");
            
            // window.location.href="index.html" 
        }
    };
</script>

</html>