sessionStorage和localStorage-CFANZ编程社区

sessionStorage和localStorage

效果展示：
在这里插入图片描述在浏览器的态势窗口，application栏。

代码展示：

sessionStorage

<!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">
    <button class="add">数据添加</button>
    <button class="del">数据删除</button>
    <button class="cha">数据修改</button>
    <button class="cls">数据清空</button>
    <script>
        //元素获得
        var input = document.querySelector('input');
        var add = document.querySelector('.add');
        var del = document.querySelector('.del');
        var cha = document.querySelector('.cha');
        var cls = document.querySelector('.cls');
        //数据添加
        add.addEventListener('click',function (params) {
            var data = input.value;
            //动态属性需要再事件触发后才能获取
            window.sessionStorage.setItem('username',data);
        });
        //数据删除
        del.addEventListener('click',function (params) {
            var data = input.value;
            //动态属性需要再事件触发后才能获取
            window.sessionStorage.removeItem('username');
        });
        //数据修改
        cha.addEventListener('click',function (params) {
            var data = input.value;
            //动态属性需要再事件触发后才能获取
            if(sessionStorage.getItem('username') !== data)
            {
                window.sessionStorage.setItem('username',data);
            }
        });
        //数据清除
        cls.addEventListener('click',function (params) {
            window.sessionStorage.clear();
        });
    </script>
</body>
</html>

localStorage

<!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">
    <button class="add">数据添加</button>
    <button class="del">数据删除</button>
    <button class="cha">数据修改</button>
    <button class="cls">数据清空</button>
    <script>
        //元素获得
        var input = document.querySelector('input');
        var add = document.querySelector('.add');
        var del = document.querySelector('.del');
        var cha = document.querySelector('.cha');
        var cls = document.querySelector('.cls');
        //数据添加
        add.addEventListener('click',function (params) {
            var data = input.value;
            //动态属性需要再事件触发后才能获取
            window.localStorage.setItem('username',data);
        });
        //数据删除
        del.addEventListener('click',function (params) {
            var data = input.value;
            //动态属性需要再事件触发后才能获取
            window.localStorage.removeItem('username');
        });
        //数据修改
        cha.addEventListener('click',function (params) {
            var data = input.value;
            //动态属性需要再事件触发后才能获取
            if(localStorage.getItem('username') !== data)
            {
                window.localStorage.setItem('username',data);
            }
        });
        //数据清除
        cls.addEventListener('click',function (params) {
            window.localStorage.clear();
        });
    </script>
</body>
</html>

sessionStorage和localStorage

1，sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。
localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。
2，两者都可以获取length属性，两者用法基本相同。
在这里插入图片描述