html5中web storage—localStorage的使用

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

但是在html5有一个loaclStorage,这个能在本地保存你的信息,这样的好处是,相当于cookie ,但是有很多不是cookie能及的!~不限制大小,存取都挺方便。

输入代码:

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

<!DOCTYPE HTML>
<html>
<head>
<title>web storage的范例—localStorage的使用</title>
<meta charset=”UTF-8″>
<script type=”text/javascript”>
function saveStorage(id){
var target=$(id);
var str=target.value;
localStorage.setItem(“message”,str);
alert(“保存成功!·”);
}

function loadStorage(id){
var target=$(id);
var msg=localStorage.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/localStorage1.htm

共有 0 条评论

Top