sessionStorage
1.与cookie的异同
相同之处：都是在特定时间段内保存数据可用
不同之处：
- cookie使用浏览器作为引用
- sessionStorage使用单个窗口作为引用，窗口关闭之后，sessionStorage存储的数据就不能再使用
2.方法 - 设置数据
setItem(key,value);
key :作为存储数据的唯一标识
value：存储的数据内容 - 根据标识获取数据
varvalue = getItem（key）; - 删除指定数据
removeItem（key）; - 将存储的所有数据清空
clear（） - 根据索引值返回key
var key = key(index);
3.属性
length
4.在这里可以找到sessionStorage（浏览器F12）
代码示例：
* 需求分析
* 新增：清空textarea元素中的所有内容
* 保存：保存用户输入的内容
* 读取：读取保存的所有数据内容
* 显示在表格中，第一列为单选框
* 修改：指定指定数据内容
* 必须选择一条数据
* 删除：删除指定数据内容
* 必须选择其中一条数据
* 清空：将保存的所有数据删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<textarea id="note" name="" rows="" cols=""></textarea>
<br />
<button id="add">添加</button>
<button id="save">保存</button>
<button id="read">读取</button>
<button id="update">修改</button>
<button id="dele">删除</button>
<button id="clear">清空</button>
<br />
<div id="showInfo">
<table id="infoTable" border="1" cellspacing="0">
</table>
</div>
<input type="hidden" id="myHidden" />
<script type="text/javascript">
var textarea = document.getElementById("note");
var add = document.getElementById("add");
var save = document.getElementById("save");
var read = document.getElementById("read");
var update = document.getElementById("update");
var dele = document.getElementById("dele");
var clear = document.getElementById("clear");
//新增
add.onclick = function() {
textarea.value = "";
read.onclick();
}
//保存
save.onclick = function() {
var key = document.getElementById("myHidden").value;
if(key) { //当前是修改，key不变，value
sessionStorage.setItem(key, textarea.value);
} else { //当前是新增，重新生成一个key
key = new Date().getTime();
sessionStorage.setItem(key, textarea.value);
}
//每次保存后要把隐藏域 给清空
document.getElementById("myHidden").value = "";
read.onclick();
}
//读取
read.onclick = function() {
//获取到表
var table = document.getElementById("infoTable");
//设置表头
table.innerHTML = "<tr><td></td><td>key</td><td>value</td></tr>";
var length = sessionStorage.length;
for(var i = 0; i < length; i++) {
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
//每次遍历到一个数据，
var row = table.insertRow();
row.insertCell().innerHTML = "<input id='" + i + "' type='radio' name='myRadio'>"
row.insertCell().innerHTML = key;
row.insertCell().innerText = value;
}
}
//修改
update.onclick = function() {
var length = sessionStorage.length;
for(var i = 0; i < length; i++) {
//通过i对应的input的id 找单选框
var input = document.getElementById(i);
//判断当前单选框是否被选中
if(input.checked) {
//找到该单选框的key和value
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
//将要修改的内容放入输入框
textarea.value = value;
//将key保存到input中，用于保存时判断当前是新增还是修改
document.getElementById("myHidden").value = key;
}
}
read.onclick();
}
//删除
dele.onclick = function() {
var length = sessionStorage.length;
for(var i = 0; i < length; i++) {
var input = document.getElementById(i);
if(input.checked) {
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
sessionStorage.removeItem(key)
}
}
read.onclick();
}
//清空
clear.onclick = function() {
sessionStorage.clear();
read.onclick();
}
</script>
</body>
</html>
localStorage
1.提供的属性和方法与sessionStorage一致
2.storage事件：实现多个窗口之间的数据内容
3.存在问题：数据安全性低
代码示例：将上面代码的sessionStorage改为localStorage即可
网友评论