如何做到存储数据 刷新页面 不丢失数据

查看数据 :

 

 

 

(关闭浏览器数据流失)代码示例 : 

　　 <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        console.log(localStorage.getItem('username'));

        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            // 当我们点击了之后，就可以把表单里面的值存储起来
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
        get.addEventListener('click', function() {
            // 当我们点击了之后，就可以把表单里面的值获取过来
            console.log(sessionStorage.getItem('uname'));

        });
        remove.addEventListener('click', function() {
            // 
            sessionStorage.removeItem('uname');

        });
        del.addEventListener('click', function() {
            // 当我们点击了之后，清除所有的
            sessionStorage.clear();

        });
    </script>

 

(关闭浏览器数据不流失)代码示例 : 

　　<input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            var val = ipt.value;
            localStorage.setItem('username', val);
        })
        get.addEventListener('click', function() {
            console.log(localStorage.getItem('username'));

        })
        remove.addEventListener('click', function() {
            localStorage.removeItem('username');

        })
        del.addEventListener('click', function() {
            localStorage.clear();

        })
    </script>

案例 记住用户名

　　<body>
        <input type="text" id="inp" />
        <input type="checkbox" id="che" />
        <script type="text/javascript">
            let inp = document.querySelector('#inp');
            let che = document.querySelector('#che');
            if (localStorage.getItem('inp')) {
                inp.value = localStorage.getItem('inp')
                che.checked = true;
            }
            
            che.addEventListener('change', function () {
                if (this.checked) {
                    localStorage.setItem('inp', inp.value);
                } else {
                    localStorage.removeItem('inp');
                }
            });
        </script>
    </body>

 

posted @ 2022-04-17 20:47  会前端的洋  阅读(347)  评论(0)    收藏  举报