html5中web storage—sessionStorage的使用

我们知道,在我们使用一些服务语言进行编程的时候,我们都会使用会话跟踪来完成很多事情,例如:判断用户的登陆状态,购物车的使用等等,但是我们不能使用客户端来做这些东西。

但是在html5有一个sessionStorage,它是在客户端建立session对象,来保存数据,也就是用户在浏览某一个网站,从开始浏览网站,但最后的关闭网站的时候,session对象可以在这一段时间内为你保存你想要的数据。

输入代码:

——————————————————————————————————-

<!DOCTYPE HTML>
<html>
<head>
<title>使用html5实现拖动</title>
<meta charset=”UTF-8″>
<script type=”text/javascript”>
function saveStorage(id){
var target=$(id);
var str=target.value;
sessionStorage.setItem(“message”,str);
alert(“保存成功!·”);
}

function loadStorage(id){
var target=$(id);
var msg=sessionStorage.getItem(“message”);
target.innerHTML=msg;
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<h1>web storage的范例</h1>
<p id=”msg” style=”color:red;”></p>
<input type=”text” id=”input”/>
<input type=”button” value=”保存数据” onclick=”saveStorage(‘input’);”/>
<input type=”button” value=”读取数据” onclick=”loadStorage(‘msg’)”/>
</body>
</html>

———————————————————————————————————

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/sessionStorage1.htm

 

共有 12 条评论

Top