使用localStorage写一个简单的数据库

其实我们只要学习localStorge和sessionStorage的基本用法,我们就能做出各种应用,比如是留言板,数据库,购物车,等等!~ 其实个人觉得要是使用localstorage来做购物车,会使得服务器端的压力大大减小,或者这也是一个不错的选择,现在先看看简单数据库吧!~

输入代码:

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

<!DOCTYPE HTML>
<html>
<head>
<title>web storage的范例—localStorage的使用</title>
<meta charset=”UTF-8″>
<script type=”text/javascript”>
function saveStorage(){
alert(“sd”);
var data=new Object;
data.name=$(“name”).value;
data.email=$(“email”).value;
data.tel=$(“tel”).value;
data.momo=$(“momo”).value;
var str=JSON.stringify(data);
localStorage.setItem(data.name,str);
alert(data.name);
alert(“保存成功!·”);
}

function findStorage(id){
var find=$(“find”).value;
alert(find);
var str=localStorage.getItem(find);
alert(str);
var data=JSON.parse(str);
var result=”姓名:”+data.name+”<br/>”;
result+=”邮箱”+data.email+”<br/>”;
result+=”号码”+data.tel+”<br/>”;
result+=”备注”+data.momo+”<br/>”;
var target=$(id);
target.innerHTML=result;
}

function clearStorage(){
localStorage.clear();
alert(“全部数据被清除”);
loadStorage(‘liuyan’);
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<h1>web-storage来做简单的数据库</h1>
<table>
<tr><td>姓名:</td><td><input type=”text” id=”name”></td></tr>
<tr><td>邮箱:</td><td><input type=”text” id=”email”></td></tr>
<tr><td>号码:</td><td><input type=”text” id=”tel”></td></tr>
<tr><td>备注:</td><td><input type=”text” id=”momo”></td></tr>
<tr>
<td></td>
<td><input type=”button” value=”保存” onclick=”saveStorage();”></td>
</tr>
</table>
<hr/>
<p>检索:<input type=”text” id=”find”>
<input type=”button” value=”检索” onclick=”findStorage(‘msg’);”>
<p id=”msg”></p>
</body>
</html>

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

代码解释:其实代码还是很简单,都是原来的那些基本的操作。

效果截图:

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

共有 1 条评论

Top