知識點: 一、設置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>