sessionStorage:寫入記事本功能[內容寫入sessionStorage中,讀取,刪除]

知識點:
一、設置sessionStorage----setItem:sessionStorage.setItem(key,data);
存儲數據使用key是惟一,不可重複,每觸發都生成;如用一個固定key變量名,觸發屢次會替換一直一個:var key = new Date().getTime();
二、獲取sesstionStorage--getItem
var value= sessionStorage.getItem(key);
key(index)方法獲得每i個key:var key = sessionStorage.key(i);
獲得全部存儲數據:var sum = sessionStorage.length;
三、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>
相關文章
相關標籤/搜索