Web Storage的应用

不关闭网页保存数据,关闭后就没有了:

function saveStorage(id){
var target=document.getElementById(id);
var str=target.value;
sessionStorage.setItem("message",str);//保存数据方法
}
function loadStorage(id){
var target=document.getElementById(id);
var msg=sessionStorage.getItem("message");//读取数据
target.innerHTML=msg;
}

永久保存数据:

function saveStorage(id){
var target=document.getElementById(id);
var str=target.value;
localStorage.setItem("message",str);//保存数据方法
}
function loadStorage(id){
var target=document.getElementById(id);
var msg=localStorage.getItem("message");//读取数据
target.innerHTML=msg;
}

数据的追加和删除:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script src="web2.js"></script>
<body>
<p id="msg"></p>
<textarea id="memo" cols="60" rows="10"></textarea>
<input type="button" value="追加数据" onclick="saveStorage('memo')" />
<input type="button" value="删除数据" onclick="clearStorage()" />
</body>
</html>

function saveStorage(id){
var data=document.getElementById(id).value;
var time=new Date().getTime();//获取当前的时间
localStorage.setItem(time,data);//保存数据方法
alert("数据已储存");
loadStorage('msg');
}
function loadStorage(id){
var result="<table border='1'>";
for(var i=0;i<localStorage.length;i++){
var key=localStorage.key(i);
var value=localStorage.getItem(key);
var date=new Date();
date.setTime(key);
result+= "<tr><td>"+value+"</td><td>"+date+"</td></tr>";
}
result+="</table>";
var target=document.getElementById(id);
target.innerHTML=result;
}
function clearStorage(){
localStorage.clear();
alert("数据已经删除");
loadStorage('msg');
}

posted @ 2015-08-04 15:15  大发明家  阅读(158)  评论(0编辑  收藏  举报