笔记--本地存储_本地存储的笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43488583/article/details/123472832

本文介绍了浏览器的本地存储机制，包括sessionStorage和localStorage的使用。通过示例展示了如何存储、获取、删除及清除数据。同时，给出了一个实用案例，演示如何利用localStorage实现记住用户名的功能，以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>