JavaScript- 本地存储

最新推荐文章于 2024-07-22 15:19:55 发布

qq_52822043

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量92

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_52822043/article/details/123805285

版权

1. 本地存储特性

2. window.sessionStorage

3. window.localStorage

1. 本地存储特性

数据存储在用户浏览器中
设置、读取方便、甚至页面刷新不丢失数据
容量较大，sessionStorage约5M、localStorage约20M
智能存储字符串，可以将对象JSON.stringify()编码后存储

2. window.sessionStorage

生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用

存储数据：

获取数据：

删除数据：

删除所有数据：

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="clear">清空数据</button>
    <script>
        var input = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var clear = document.querySelector('.clear');
        set.addEventListener('click', function() {
            var value = input.value;
            sessionStorage.setItem('name', value);
            sessionStorage.setItem('password', value);
        });
        set.addEventListener('click', function() {
            alert(sessionStorage.getItem('name'));
        });
        set.addEventListener('click', function() {
            //删除数据，一个一个地删除
            sessionStorage.removeItem('password');
        });
        set.addEventListener('click', function() {
            //全部删除
            // sessionStorage.clear();
        });
    </script>
</body>

结果为：

3. window.localStorage

生命周期永久生效，除非手动删除，否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

存储数据：

获取数据：

删除数据：

删除所有数据：

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="clear">清空数据</button>
    <script>
        var input = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var clear = document.querySelector('.clear');
        set.addEventListener('click', function() {
            var value = input.value;
            localStorage.setItem('name', value);
            localStorage.setItem('password', value);
        });
        set.addEventListener('click', function() {
            alert(localStorage.getItem('name'));
        });
        set.addEventListener('click', function() {
            //删除数据，一个一个地删除
            localStorage.removeItem('password');
        });
        set.addEventListener('click', function() {
            //全部删除
            // localStorage.clear();
        });
    </script>
</body>

结果为：

qq_52822043

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript- 本地存储

目录1. 本地存储特性2. window.sessionStorage存储数据：获取数据：删除数据：删除所有数据：3. window.localStorage存储数据：获取数据：删除数据：删除所有数据：1. 本地存储特性数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage约5M、localStorage约20M 智能存储字符串，可以将对象JSON.stringify()编码后存储2..
复制链接

扫一扫