会话存储sessionStorage与本地存储localStorage叙述与案例分析

周百万.

已于 2022-07-16 23:49:11 修改

阅读量332

点赞数

分类专栏： javascript 编程 html 文章标签： javascript 前端 html5 css

于 2022-07-16 23:41:54 首次发布

本文链接：https://blog.csdn.net/m0_45142186/article/details/125826446

版权

html 同时被 3 个专栏收录

37 篇文章 20 订阅

订阅专栏

javascript

28 篇文章 3 订阅

订阅专栏

编程

19 篇文章 1 订阅

订阅专栏

一、概述：

会话存储：

生命周期为关闭浏览器窗口

在同一个窗口页面下数据可以共享

以键值对的形式存储使用

存储数据：sessionStroage.setItem.('key','value');

获取数据：sessionStorage.getItem.('key');

删除数据：sessionStroage.removeItem('key');

清除所有数据：sessionStorage.clear( );

注意点：所有方法的括号里面，不管是赋值还是使用值都要用引号引起来

本地存储：

生命周期为永久生效。除非手动删除，否则关闭浏览器也会存在。

可以在同一浏览器中的不同页面共享数据

以键值对的形式存储使用

存储数据：localStorage.setItem('key','value');

获取数据：localStorage.getItem('key');

删除数据：localStorage.remove('key');

清除所有数据：localStorage.clear( );

二、案例

会话存储：

主体样式如图所示：

主要利用四个按钮，对文本框中的值进行存储、获取、删除的操作。

<style>
        button {
            width: 100px;
            height: 50px;
        }
        
        input {
            height: 50px;
            outline: none;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <!-- html部分 -->
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获得数据</button>
    <button class="remove">删除数据</button>
    <button class="clear">清除所有数据</button>
    <!-- script部分 -->
    <script>
        // 获取元素
        var get = document.querySelector('.get');
        var set = document.querySelector('.set');
        var remove = document.querySelector('.remove');
        var clear = document.querySelector('.clear');
        // 获取input文本框
        var ipt = document.querySelector('input');
        // 给"存储"按钮添加点击注册事件
        // 如果input文本框中有值，当点击"存储"按钮时，就将他会话存储，并提示。
        // 如果input文本框中没有值，下面的就不再执行
        set.addEventListener('click', function() {
            if (ipt.value == '') {
                return false;
            }
            sessionStorage.setItem('uname', ipt.value);
            ipt.value = '';
            alert('存储成功！');
        });
        // 定义一个全局变量的变量
        var u = null;
        // 给"获取"按钮添加点击注册事件
        // 先用会话存储的方式获取uname(上面刚存入)的值，如果uname为空就不再执行；
        // 如果有值就alert输出值。
        get.addEventListener('click', function() {
            u = sessionStorage.getItem('uname');
            if (u == null) {
                return false;
            }
            alert(u);
        });
        // 给"删除"按钮添加点击注册事件
        // 先判断上面是否存入值，如果存入uname的值，就删除；否则下面的就不再执行
        remove.addEventListener('click', function() {
            if (u == null) {
                return false;
            }
            sessionStorage.removeItem('uname');
            alert('删除成功！');
        });
    </script>

本地存储：

主体样式如图所示：

主要是利用本地存储的永久保存的特点，实现输入内容后关闭窗口，等再打开时能’记忆‘显示之前输入过的文字。

勾选存储选择框后才能存储，不勾选就清除（保护用户隐私）。

<style>
        input#ipt {
            width: 200px;
            height: 40px;
            outline: none;
            margin-left: 600px;
        }
        
        input#check {
            width: 20px;
            height: 20px;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="ipt">
    <input type="checkbox" name="按钮" id="check">
    <script>
        // 执行顺序：按顺序执行。
        // 1、判断uname是否有值，如果有值执行第一段代码。
        // 2、执行完后再执行第二段，如果复选框状态发生改变就触发事件

        // 获取元素
        var ipt = document.querySelector('#ipt');
        var check = document.querySelector('#check');

        // 第一段
        // 如果uname有值，就存起来，并把复选框勾选
        // 作用：刷新之后看看uname有值吗，有值的话就显示在文本框中（赋值）
        if (localStorage.getItem('uname')) {
            // 将值赋值给文本框
            ipt.value = localStorage.getItem('uname');
            // 将复选框选中状态
            check.checked = true;
        };
        // 第二段
        // 如果复选框发生改变   1、打钩：将文本框中的值存储到uname里面   2、取消勾：清除uname和他的值
        check.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('uname', ipt.value);
            } else {
                localStorage.removeItem('uname');
            }
        })
    </script>