sessionStorage实现note的功能

Posted mrzwj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了sessionStorage实现note的功能相关的知识,希望对你有一定的参考价值。

功能图如图所示:

技术分享图片

文本域中输入点击保存后的结果如图所示:

技术分享图片

点击读取后的结果图:

技术分享图片

选择山羊对应的按钮进行修改并点击保存后的结果:

技术分享图片

 

 选择山羊养对应的单选按钮进行删除操作后的结果图:

技术分享图片

点击清空后的结果:

技术分享图片

源代码:

<!DOCTYPE html>
<html xmlns:height="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>sessionStorage</title>

</head>

<body>
<textarea id="textArea" rows="10" cols="100"></textarea><br/>
<button id="reset" value="重置">重置</button>
<button id="restore" value="保存">保存</button>
<button id="read" value="读取">读取</button>
<button id="set" value="修改">修改</button>
<button id="del" value="删除">删除</button>
<button id="clear" value="清空">清空</button>
<br/>
<div id="show"></div>
<!--用来以表格形式展示利用sessionStorage存储的键值对-->
<input type="hidden" id="hidden"><!--隐藏区域,点击修改后会将单选按钮选中的键存储在它的value中,
以便在按下保存按钮触发事件时判断对应的键是否已经存在了,这块区域对用户是不可见的-->
</body>
</html>
<script type="text/javascript">
var restore = document.getElementById("restore");
var read = document.getElementById("read");
var set = document.getElementById("set");
var del = document.getElementById("del");
var hidden = document.getElementById("hidden");
var reset = document.getElementById("reset");
var textArea = document.getElementById("textArea");

//重置
reset.onclick = function (event) {
textArea.value = "";//重置即键对应的文本域的value设置位空
};

//保存
restore.addEventListener("click", function () {
var key = hidden.value;//取得隐藏区域的value
if (!key) {//若为空或者位undefind,则将当前事件作为键
key = new Date().getTime();//将时间作为键
}
var value = textArea.value;//文本域中输入的内容即为值
sessionStorage.setItem(key, value);//设置操作
hidden.value = "";//将hidden的value置为空,以免后面进行修改时出现hidden的value有值的情况发生
alert("保存成功");
});
//读取
read.onclick = reading;

function reading() {
var show = document.getElementById("show");
//这里采用拼接字符串的形式,拼出html语句,最后再添加到show面板上面
var str = "<table border=‘thin black solid‘><tbody></tbody><tr><th> </th><th>key</th><th>value</th></tr>";
for (var i = 0; i < sessionStorage.length; i++) {//遍历sessionStorage
var key = sessionStorage.key(i);//通过索引值找到对应的键
var value = sessionStorage.getItem(key);//通过键找到对应的值
str += "<tr><td><input type=‘radio‘ name=‘radios‘></td><td>" + key + "</td><td>" + value + "</td></tr>";
}
str += "</tbody></table>";
show.innerHTML = str;//添加到show面板上面
}

//修改
set.onclick = function () {
var radios = document.getElementsByName("radios");//getElementsByName和getElementsByTagName是不一样的
var value;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
var key = sessionStorage.key(i);//通过索引获得键
value = sessionStorage.getItem(key);//通过键获得值
textArea.value = value;//将值显示在文本域中
hidden.value = key;//隐藏区的value设置为key,以便在保存的时候判断键是否存在
break;
}
}
};
//删除
del.addEventListener("click", function () {
var radios = document.getElementsByName("radios");//getElementsByName和getElementsByTagName是不一样的
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
var key = sessionStorage.key(i);
sessionStorage.removeItem(key);//通过键删除键值对,键唯一
reading();
break;
}
}
});

//清除
var clear = document.getElementById("clear");
clear.addEventListener("click", function () {
// for (var i = sessionStorage.length - 1; i >= 0; i--) {
// var key = sessionStorage.key(i);//通过索引值找到对应的键
// sessionStorage.removeItem(key);//通过键删除键值对,键唯一
// //这里注意每当删除一个之后,比删除索引大的索引值都会减一,
// // 所以不能使用(var i=0;i<length;i++)的形式,这样找到后面就会超出索引的范围
// var key = sessionStorage.key(i);//通过索引值找到对应的键
// sessionStorage.removeItem(key);//通过键删除键值对,键唯一
// }
sessionStorage.clear();//这一个方法就可以代替上面注释部分的所有代码
reading();
})


</script>











































































































以上是关于sessionStorage实现note的功能的主要内容,如果未能解决你的问题,请参考以下文章

vue 本地存储数据 sessionStorage

H5-Web存储API使用

怎么通过代码实现seesionstorage和localstorage的切换

如何实现类似于“google keep notes”app清单功能的清单?

HTML5 使用sessionStorage实现特定页面返回刷新页面

退出功能