localStorage和sessionStorage

最新推荐文章于 2024-09-12 13:42:17 发布

江呱呱

最新推荐文章于 2024-09-12 13:42:17 发布

阅读量264

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108651180

版权

js 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

localStorage和sessionStorage

一、localStroage
1.localStorage.setItem("","")//设置存储的数据键值对
2.localStorage.getItem("");//获取存储的数据
3.localStorage.removeItem("");//移除存储的数据
4.localStorage.clear();//清空存储的数据

二、sessionStorage
1.sessionStorage.setItem("","")//设置存储的数据键值对
2.sessionStorage.getItem("");//获取存储的数据
3.sessionStorage.removeItem("");//移除存储的数据
4.sessionStorage.clear();//清空存储的数据

三、localStorage和sessionStorage的区别
1. localStorage的存储期限是永久存储
2. sessionStorage的存储期限是当前页面的打开和关闭 (刷新不会导致内容的消失)

使用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        <input type="password" id="password">
        <input type="checkbox" id='remenber'> 记住密码

    </form>
    <script>
 // 获取元素
        var password = document.getElementById('password');
        var remenber = document.getElementById('remenber');


        // 获取本地存储中的数据
        var isRemenber = localStorage.getItem("isRemenber") === "true";
        var psd = localStorage.getItem("psd");

        // 判定本地存储中的数据
        if (isRemenber) {
            remenber.checked = isRemenber;
            password.value = psd
        }


        // 绑定事件 
        remenber.onchange = function() {
            // 记住密码 
            localStorage.setItem("psd", password.value);
            // 记住当前状态
            localStorage.setItem("isRemenber", this.checked);


            sessionStorage.setItem("psd", password.value);
            sessionStorage.setItem("isRemenber", this.checked);
        }
            </script>
</body>

</html>