两种本地存储

最新推荐文章于 2024-05-24 23:45:01 发布

Crystal是粉色的

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量106

点赞数

文章标签：前端 elementui javascript

本文链接：https://blog.csdn.net/m0_51806135/article/details/124645095

版权

Session Storage

生命周期为关闭浏览器窗口，即关闭之后再进入数据将会清空

需要实现点击存储数据则输入的数据可以存储到本地

<body>
    <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');
        set.addEventListener('click',function(){
            // 将input里面的value值赋值给变量val
            var val=ipt.value;
            // 本地存储，key为键，val为值，以键值对的形式存储
            sessionStorage.setItem('key',val);
        })
    </script>

F12键查看，选择Application->Session Storage 然后输入123456点击存储数据可以看到数据已经以键值对的形式存储下来

还有其他的一些删除、获取、清空数据的操作

 // 点击了之后就可以把表单里面的值获取过来
        get.addEventListener('click',function(){
            console.log(sessionStorage.getItem('key'));
        });
        // 点击了之后可以删除存储的数据
        remove.addEventListener('click',function(){
            sessionStorage.removeItem('key');
        })
        // 点击了之后可以清除所有的数据
        del.addEventListener('click',function(){
            sessionStorage.clear();
        })

localStorage

1.生命周期永久生效，除非手动的删除，否则关闭页面之后仍然存在

2.可以多窗口（页面）使用共享（必须在同一浏览器当中）

用法与sessionStorage一样，也是键值对存储

Crystal是粉色的

关注

0
点赞
踩
0

收藏

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

Session Storage生命周期为关闭浏览器窗口，即关闭之后再进入数据将会清空需要实现点击存储数据则输入的数据可以存储到本地<body> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据&l
复制链接

扫一扫