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

時間 2019-11-12

標籤 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>

相關標籤/搜索

sessionstorage

寫入

localstorage&sessionstorage

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。