知识点:
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>