HTML5——Web存储API，sessionStorage和localStorage

来源：互联网发布：党员干部必知50个名词编辑：程序博客网时间：2024/04/29 15:39

sessionStorage

sessionStorage像是cookie的替代，可以在特定的时间段内保持数据可用，但是只能单窗口引用，且窗口关闭后将不能使用

sessionStorage语法：

setItem(key,value)—用键值对创建项，如果键值已经存在，则更新值。

例：sessionStorage.setItem("uname","zhangsan");

getItem(key)—根据指定的键值获取对应的值。

例：sessionStorage.getItem("uname");

属性：

length—返回存储空间中积累的项的数量

方法：

key(index)—获取指定索引位置对应的项的键值

例：

var len=sessionStorage.length;

for(var i=0;i<len;i++){

var key=sessionStorage.key(i);

alert(sessionStorage.getItem(key));

}

removeItem(key)—根据项的键值删除指定的项

clear()—清空存储空间，删除所有的项

localStorage

localStorage是将数据存储在本地，可以永久存储，由用户决定是否保留。

localStorage与sessionStorage有相同的接口，所以sessionStorage所有的方法和属性对localStorage都有效。

案例：实现Web留言本功能

<!DOCTYPE html>
<html>
<head>
<title>Web版本的简单记事本</title>
<meta charset="utf-8"/>
</head>
<body>

<h1>Web版本的简单记事本</h1>
<textarea rows="10" cols="50" id="mytext"></textarea>
<br>
<input type="button" id="save" value="保存">
<input type="button" id="load" value="读取">
<input type="button" id="update" value="修改">
<input type="button" id="remove" value="删除">
<input type="button" id="clear" value="清空">
<br><br>
<div id="show"></div>
<script>
var radioid;
// 1. 保存功能
var save = document.getElementById("save");
save.onclick = function(){
var mytext = document.getElementById("mytext").value;
if(mytext != ""){
var mykey;
if(!radioid){
// 新增
mykey = new Date().getTime();
}else{
// 修改
mykey = radioid;
}

sessionStorage.setItem(mykey,mytext);
// 清空文本框内容
}else{
alert("请输入内容后再保存!");
}
}
// 2. 读取所有数据
var load = document.getElementById("load");
load.onclick = myLoad;
function myLoad(){
var mytable = "<table border='1'><tr><td></td><td align='center'><b>key值</b></td><td align='center'><b>value值</b></td></tr>";
for(var i=0;i<sessionStorage.length;i++){
// a. 调用key(index)方法,根据索引值返回key
var mykey = sessionStorage.key(i);
// b. 调用getItem(key)方法,根据key返回value
var myvalue = sessionStorage.getItem(mykey);
// 构建表格
mytable = mytable + "<tr><td><input type='radio' id='"+mykey+"' name='myradio'></td><td>"+mykey+"</td><td>"+myvalue+"</td></tr>";
}
mytable = mytable + "</table>";
var show = document.getElementById("show");
show.innerHTML = mytable;
}
// 3. 修改功能
var update = document.getElementById("update");
update.onclick = function(){
// a. 获取所有单选框
var radios = document.getElementsByName("myradio");
// b. 遍历所有单选框

for(var i=0;i<radios.length;i++){
if(radios[i].checked){
radioid = radios[i].getAttribute("id");
break;
}
}
var myvalue = sessionStorage.getItem(radioid);
var mytext = document.getElementById("mytext");
mytext.value = myvalue;
}
// 4. 删除
var remove = document.getElementById("remove");
remove.onclick = function(){
// a. 获取所有单选框
var radios = document.getElementsByName("myradio");
// b. 遍历所有单选框
for(var i=0;i<radios.length;i++){
if(radios[i].checked){
radioid = radios[i].getAttribute("id");
break;
}
}
// 删除
sessionStorage.removeItem(radioid);
myLoad();
}
// 5. 清空
var clear = document.getElementById("clear");
clear.onclick = function(){
sessionStorage.clear();
}
</script>
</body>
</html>

0 0