session可以作为会话计数器,localStorage则可以作为Web应用访问计数器.声明一个localStorage计数变量,当刷新页面时,会看到计数器在增长,即使关闭浏览器窗口,然后重新访问页面,计数器会继续计数.而sessionStorage计数变量只能够在当前会话期间显示页面访问量,即刷新页面后会看到计数器增长,而关闭浏览器窗口,然后再试一次,计数器已经重置了.
1.在文本框内输入数据后
2.单击"session保存"按钮和"local保存"按钮对数据进行保存
3.单击"session读取"按钮和"local读取"按钮对数据进行读取.
如下图:
session读取:
local读取:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<center>
<h1>计数器</h1>
<p id="p1"></p>
<p id="p2">
Storage:<input type="text" value="" id="T1">
</p>
<p>
<input type="button" id="but1" value="session保存"> <input
type="button" id="but2" value="session读取"> <input type="button"
id="but3" value="local保存"> <input type="button" id="but4"
value="local读取">
</p>
<p id="count_s">
本页访问的session次数:<span id="seesion_count"></span>
</p>
<p id="count_l">
本页访问的local次数:<span id="local_count"></span>
</p>
</center>
<script type="application/javascript">
function getId(id){
return document.getElementById(id);
}
var p1 = getId("p1"), p2 = getId("p2"),T1 = getId("T1"),but1 = getId("but1"),but2 = getId("but2"),but3 = getId("but3");
but1.onclick = function(){
sessionStorage.setItem('msg','seesionStorage = ' + T1.value);
}
but2.onclick = function(){
p2.innerHTML=sessionStorage.getItem('msg');
}
but3.onclick = function(){
localStorage.setItem('msg','localStorage = ' + T1.value);
}
but4.onclick = function(){
p2.innerHTML=localStorage.getItem('msg');
}
//计数
var local_count = localStorage.getItem('a_count')?localStorage.getItem('a_count'):0;
getId('local_count').innerHTML = local_count;
localStorage.setItem('a_count',+local_count+1);
var session_count = sessionStorage.getItem('a_count')?sessionStorage.getItem('a_count'):0;
getId('seesion_count').innerHTML = session_count;
sessionStorage.setItem('a_count',+session_count+1);
</script>
</body>
</html>
151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
