zoukankan      html  css  js  c++  java
  • sessionStorage:写入记事本功能[内容写入sessionStorage中,读取,删除]

    知识点:
    1、设置sessionStorage----setItem:sessionStorage.setItem(key,data);
    存储数据使用key是唯一,不可重复,每触发都生成;如用一个固定key变量名,触发多次会替换一直一个:var key = new Date().getTime();
    2、获取sesstionStorage--getItem
    var value= sessionStorage.getItem(key);
    key(index)方法得到每i个key:var key = sessionStorage.key(i);
    得到所有存储数据:var sum = sessionStorage.length;
    3、for循环中删除sessionStorage用sessionStorage.removeItem(key);直接用sessionStorage.clear()替代;
     del.onclick=function(){
            var sum2= sessionStorage.length;
    for(var i=sum2-1;i>=0;i--) {
                    var  key = sessionStorage.key(i);
                    sessionStorage.removeItem(key);
            }
         
        }
    替换成简单的:
    del.onclick=function(){
            sessionStorage.clear();//替代 for循环中的removeItem(key);
     }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
    <input type="text" id ="txt"/>
    <input  type ='button' id="btn" value="保存">
    <input  type ='button' id="ready" value="读取">
    <input  type ='button' id="del" value="删除">
    <script>
        var btn = document.querySelector('#btn');
        var ready = document.querySelector('#ready');
        var del = document.querySelector('#del');
        //设置sessionStorage----setItem
        btn.onclick=function(){
            var data = document.querySelector('#txt').value;
            //存储数据使用key是唯一,不可重复,每触发都生成;如用一个固定key变量名,触发多次会替换一直一个
            var key = new Date().getTime();
            sessionStorage.setItem(key,data);
        }
        //获取sesstionStorage--getItem
        ready.onclick=function(){
            var arrs=[];
            //得到所有存储数据
          var sum = sessionStorage.length;
          for(var i=0;i<sum;i++){
              //得到每i个key
              var  key = sessionStorage.key(i);
              //根据key得到对应value
              var value= sessionStorage.getItem(key);
              // arrs.push(value);
              console.log(value)
    
          }
        }
    
        //删除sessionStorage--removeItem(key)/clear()
        del.onclick=function(){
            var sum2= sessionStorage.length;
            //for 循环i继续计数上一次,删除的数据也按上一次计数,不准,所有用倒数删除
        // for(var i=0;i<sum2;i++) {
            //删除一个数据,长度减去一个
    for(var i=sum2-1;i>=0;i--) {
                    var  key = sessionStorage.key(i);
                    sessionStorage.removeItem(key);
            }
            sessionStorage.clear();//替代 for循环中的removeItem(key);
        }
    </script>
    </body>
    </html>
  • 相关阅读:
    UE4——查找指定类型或名称的Actor对象
    unity 替换渲染 ( Rendering with Replaced Shaders )
    浅谈Java消息服务(JMS)规范与ActiveMQ实现
    初识WebSocket(一)--WebSocket介绍与实现简单web群聊
    IDEA编译器常用快捷键总结
    初识Docker(二)--Docker常用命令
    初识Docker(一)--Docker介绍及安装
    自定义hexo博客melody主题标签页title
    vue+springboot+el-uolpad组件实现文件上传
    判断一个数是否为2的整数次幂
  • 原文地址:https://www.cnblogs.com/liubingyjui/p/10302678.html
Copyright © 2011-2022 走看看