HTML5存储系统

最新推荐文章于 2024-09-10 11:30:12 发布

nosayno

最新推荐文章于 2024-09-10 11:30:12 发布

阅读量317

点赞数

文章标签： html5 存储系统

本文链接：https://blog.csdn.net/nosayno/article/details/49821749

版权

html5中的存储系统包括了两种存储方式：sessionStorage和localStorage。两种存储系统的操作方法相同，他们之间的区别在于：

sessionStorage存储系统存储数据的特点

1. 当浏览器窗口关闭时,数据全部丢失

2.当再次打开浏览器窗口时,数据不能使用

localStorage存储系统存储数据的特点
1.当浏览器窗口关闭时,数据依旧存储
2.当再次打开浏览器窗口时,数据继续使用
3. 数据只能由用户删除

以下是一个实现简单的记事本功能的代码段，都由基本的操作方法来完成：可用来初步了解sessionStorage的用法。

<body>
<textarea id="note"></textarea><br>
<input type="button" id="add" value="新增">
<input type="button" id="save" value="保存">
<input type="button" id="read" value="读取">
<input type="button" id="update" value="修改">
<input type="button" id="dele" value="删除">
<input type="button" id="clear" value="清空">
<div id="show"></div>

<input type="hidden" id="mykey">
<script>
// 1. 首先获取页面中所有按钮
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");
var note = document.getElementById("note");
var mykey = document.getElementById("mykey");
// 2. 为所有按钮绑定click事件
// 新增
add.onclick = function(){
note.value = "";
alert("新建一个记事本.");//测试代码
}
// 保存
save.onclick = function(){
var value = note.value; // 1. 获取用户输入内容
var key = mykey.value; // 获取hidden元素的value属性值
if(!key){// 判断是新增还是修改
key = new Date().getTime();//新增，创建key
}
sessionStorage.setItem(key,value);// 3. 保存数据内容
alert("已经保存成功.");//测试代码
}
// 读取 - 所有数据，绘制一个table元素，并且动态的添加行列！
read.onclick = readDatas;
function readDatas(){
var show = document.getElementById("show");// 获取div元素
// 利用string拼完整的HTML代码
var myhtml = "<table border='1'><tbody><tr><td></td><td>key</td><td>value</td></tr>";
var sum = sessionStorage.length; // 获取所有数据的个数
for(var i=0;i<sum;i++){// 遍历所有数据
var key = sessionStorage.key(i);// 根据索引值得到key
var value = sessionStorage.getItem(key);// 根据key得到value
myhtml += "<tr><td><input type='radio' name='mydatas' value='"+i+"'></td><td>"+key+"</td><td>"+value+"</td></tr>";
}
myhtml += "</tbody></table>";
show.innerHTML = myhtml;// 将完整的HTML代码插入在div中
}
// 修改
update.onclick = function(){
var radios = document.getElementsByName("mydatas");// 获取用户选择那条记录
for(var i=0;i<radios.length;i++){
var radio = radios[i];
if(radio.checked){
var index = radio.value;// 获取选中单选框的value属性值(索引值)
var key = sessionStorage.key(index); // 得到对应的key和value值
var value = sessionStorage.getItem(key);
note.value = value; // 将得到的value值,写入到textarea中
mykey.value = key;// 将读取的key值,写入到hidden元素的value属性值
}
}
}
// 删除，实现方式同上（修改）
dele.onclick = function(){
var radios = document.getElementsByName("mydatas");
for(var i=0;i<radios.length;i++){
var radio = radios[i];
if(radio.checked){
var index = radio.value;
var key = sessionStorage.key(i);
sessionStorage.removeItem(key);
break;
}
}
// 删除完成后重新读取
readDatas();
alert("该条记录成功删除."); //测试代码
}
// 清空所有
clear.onclick = function(){
sessionStorage.clear();
alert("数据已清空."); //测试代码
}
</script>
</body>

nosayno

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5存储系统

html5中的存储系统包括了两种存储方式：sessionStorage和localStorage。两种存储系统的操作方法相同，他们之间的区别在于：sessionStorage存储系统存储数据的特点 1. 当浏览器窗口关闭时,数据全部丢失 2.当再次打开浏览器窗口时,数据不能使用localStorage存储系统存储数据的特点 1.当浏览器窗
复制链接

扫一扫