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>

sessionStorage：写入记事本功能[内容写入sessionStorage中，读取，删除]

猜你喜欢