JavaScript本地存储

最新推荐文章于 2024-05-17 13:52:13 发布

MDR_0820

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量84

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/mdr_0820/article/details/121042307

版权

JavaScript 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

本地存储特性

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

window.sessionStorage

生命周期为关闭窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用
sessionStorage.setlitem( key,value) 键，值
sessionStorage.getItem(‘key’) 获取数据
sessionStorage.removeItem(‘key’) 删除数据
sessionStorage.clear() 、、清空数据

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button  class="get">获取数据 </button>
    <button class="rem" >删除数据</button>
    <button class="clear"> 清空数据</button>
    <script>
        var ipt = document.querySelector('input')
        var set = document.querySelector('.set')
        set.addEventListener('click',function(){
            // 当我们点击之后 就可以把表单里的 值存储起来
            var val = ipt.value;
            sessionStorage.setItem('uname',val)
            sessionStorage.setItem('string',val)
        })
        var get = document.querySelector('.get')
        // 获取数据
        get.addEventListener('click',function(){
            console.log(sessionStorage.getItem('uname'));
        })
        //删除数据
        var rem = document.querySelector('.rem')
        rem.addEventListener('click',function(){
            sessionStorage.removeItem('uname')
        })
        //清空 数据
        var clear = document.querySelector('.clear')
        clear.addEventListener('click',function(){
            sessionStorage.clear()  // 不写参数
        })
    </script>
</body>

在这里插入图片描述

MDR_0820

关注

0
点赞
踩
0

收藏

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

本地存储特性数据存储在用户浏览器中设置读取方便甚至页面刷新不丢失数据容量较大、sessionStorage 约5M localStorage 约20M只能存储字符串可以将对象JSON.stringify()编码后储存window.sessionStorage生命周期为关闭窗口在同一个窗口（页面）下数据可以共享以键值对的形式存储使用sessionStorage.setlitem( key,value) 键，值sessionStorage.getItem(‘key’) 获取数
复制链接

扫一扫