HTML5提供了两种在客户端存储数据的新方法：
localStorage-没有时间限制的数据存储;一年以后数据仍然可以使用
sessionStorage-针对一个session的数据存储之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高;当用户关闭浏览器窗口,数据会被删除
localStorage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>localStorage</title>
<script type="text/javascript">
var ta;
var btn;
window.onload=function(){
ta=document.getElementById("ta");
if(localStorage.text){
ta.value=localStorage.text;
}
btn=document.getElementById("btn");
btn.onclick=function(){
// alert(ta.value)
localStorage.text=ta.value;
}
}
</script>
</head>
<body>
<textarea id="ta" style="width: 200px;height: 200px;"></textarea>
<button id="btn">save</button>
</body>
</html>
sessionStorage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sessionStorage</title>
<script>
var num=0;
var txt;
var btn;
window.onload=function(){
txt=document.getElementById("txt");
btn=document.getElementById("addbtn");
if(sessionStorage.num){
num=sessionStorage.num;
}else{
num=0;
}
btn.onclick=function(){
num++;
sessionStorage.num=num;
showNum();
}
}
function showNum(){
txt.innerHTML=num;
}
</script>
</head>
<body>
<span id="txt">0</span>
<button id="addbtn">add</button>
</body>
</html>
效果图参考:
转载请注明：大灰牛博客 » HTML5 Web存储