美文网首页
本地存储window.sessionStorage

本地存储window.sessionStorage

作者: 圆滚滚大煤球 | 来源:发表于2021-08-06 15:53 被阅读0次

特点
1、生命周期为关闭浏览器则数据不存在;
2、在同一个窗口下数据可以共享;
3、以键值对的形式存储('key','value');

HTML

<input type="text" name="" id="">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="delete">清除数据</button>

JS

    var ipt = document.querySelector('input');
    var set = document.querySelector('.set');
    var get = document.querySelector('.get');
    var remove = document.querySelector('.remove');
    var del = document.querySelector('.delete');

    // 鼠标点击存储数据
    set.addEventListener('click',function(){
        // 获取ipt的value存为变量
        var val = ipt.value;
        // 传给本地存储
        sessionStorage.setItem('uname',val);
        sessionStorage.setItem('age',val);
    })

    // 鼠标点击获取数据
    get.addEventListener('click',function(){
        console.log(sessionStorage.getItem('uname'));
    })

    // 鼠标点击删除数据
    remove.addEventListener('click',function(){
        sessionStorage.removeItem('uname')
    })

    // 清除数据
    del.addEventListener('click',function(){
        sessionStorage.clear();
    })

相关文章

  • 本地存储window.sessionStorage

    特点1、生命周期为关闭浏览器则数据不存在;2、在同一个窗口下数据可以共享;3、以键值对的形式存储('key','v...

  • localStorage和sessionStorage

    *示例 localStorage 设置本地存储 读取本地存储 清除本地存储 key()方法 说明:在不知道本地存储...

  • vue学习(38)webStorage

    知识点 存储内容大小一般在5M左右(不同浏览器可能不一样) 浏览器通过window.sessionStorage和...

  • HTML 本地存储

    HTML本地存储:优于cookies 什么是HTML本地存储? 通过本地存储(Local Storage),web...

  • HTML5存储

    HTML5的本地存储与离线存储 1.本地存储 - Web storage2.本地存储 - indexedDB3...

  • iOS安全编码规范

    一.本地数据安全规范 1.本地存储密码、敏感数据加密: 本地存储:NSUserDefaults存储、plist文件...

  • H5存储

    1.本地存储-Web Storage2.本地存储-IndexedDB3.本地存储的扩展介绍4.离线存储-app c...

  • 本地存储和jQuery UI

    本地存储 本地存储分为cookie,以及新增的localStorage和sessionStoragecookie ...

  • Day 20 存储

    本地存储 本地存储分为cookie,以及H5新增的localStorage和sessionStorage; 本地储...

  • jQuery本地存储

    jQuery本地存储 本地存储有三种: cookie cookie 存储在本地,容量最大4k,在同源的http请求...

网友评论

      本文标题:本地存储window.sessionStorage

      本文链接:https://www.haomeiwen.com/subject/emzbvltx.html