知识点: 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.οnclick=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.οnclick=function(){ var data = document.querySelector('#txt').value; //存储数据使用key是唯一,不可重复,每触发都生成;如用一个固定key变量名,触发多次会替换一直一个 var key = new Date().getTime(); sessionStorage.setItem(key,data); } //获取sesstionStorage--getItem ready.οnclick=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.οnclick=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>