笔记--本地存储

最新推荐文章于 2024-05-02 18:12:22 发布

若梦丶忆流年

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量408

点赞数 1

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_43488583/article/details/123472832

版权

1. 本地存储

在这里插入图片描述

2. window.sessionStorage

在这里插入图片描述

<body>
    <input type="text">
    <button class="cte">创建存储</button>
    <button class="getData">获取存储</button>
    <button class="del">删除存储</button>
    <button class="delAll">删除所有存储</button>
    <script>
        var ipt = document.querySelector('input');
        var cte = document.querySelector('.cte');
        var getData = document.querySelector('.getData');
        var del = document.querySelector('.del');
        var delAll = document.querySelector('.delAll');
        // 增加数据
        cte.addEventListener('click', function() {
            sessionStorage.setItem('data', ipt.value);
        });
        // 读取数据
        getData.addEventListener('click', function() {
            console.log(sessionStorage.getItem('data'));
        });
        // 删除数据
        del.addEventListener('click', function() {
            sessionStorage.removeItem('data');
        });
        // 删除所有数据
        delAll.addEventListener('click', function() {
            sessionStorage.clear();
        });
    </script>
</body>

3. window.localStorage

在这里插入图片描述

<body>
    <input type="text">
    <button class="cte">创建存储</button>
    <button class="getData">获取存储</button>
    <button class="del">删除存储</button>
    <button class="delAll">删除所有存储</button>
    <script>
        var ipt = document.querySelector('input');
        var cte = document.querySelector('.cte');
        var getData = document.querySelector('.getData');
        var del = document.querySelector('.del');
        var delAll = document.querySelector('.delAll');
        // 增加数据
        cte.addEventListener('click', function() {
            localStorage.setItem('data', ipt.value);
        });
        // 读取数据
        getData.addEventListener('click', function() {
            console.log(localStorage.getItem('data'));
        });
        // 删除数据
        del.addEventListener('click', function() {
            localStorage.removeItem('data');
        });
        // 删除所有数据
        delAll.addEventListener('click', function() {
            localStorage.clear();
        });
    </script>
</body>

案例：记住用户名

<body>
    <input type="text">
    <input type="checkbox">
    <button>提交</button>
    <script>
        var ipts = document.querySelectorAll('input');
        var btn = document.querySelector('button');
        // 判断是否选中
        if (localStorage.getItem('flag') == 'true') {
            ipts[0].value = localStorage.getItem('value');
        } else {
            ipts[0].value = '';
        }
        btn.addEventListener('click', function() {
            localStorage.setItem('value', ipts[0].value);
            localStorage.setItem('flag', ipts[1].checked);
        })
    </script>
</body>