利用web storage制作简易数据库

利用web storage制作简易数据库

如何利用webStorage来制作简易的数据库,利用localStorage中的key和value实现简单表的创建。
首先创建一个对象,将对象以JSON的格式作为文本保存,获取对象的时候就通过JSON格式进行获取。

下面来看一下代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简易数据库</title>
	<script type="text/javascript">
	function saveStorage(){
		var data = new Object;
		data.name = document.getElementById('name').value;
		data.email = document.getElementById('email').value;
		data.tel = document.getElementById('tel').value;

		var str = JSON.stringify(data);
		localStorage.setItem(data.name,str);
		alert("数据已保存!");
	}
	function findStorage(id){
		var find = document.getElementById('find').value;
		var str = localStorage.getItem(find);
		var data = JSON.parse(str);
		var result = "姓名:"+data.name+'<br>';
		result+='EMAIL:' + data.email +'<br>';
		result+='电话号码:' +data.tel+'<br>';

		var target=document.getElementById(id);
		target.innerHTML=result;

	}
	</script>
</head>
<body>
	<h1>使用web storage来制作简易数据库</h1>
	<table>
		<tr><td>姓名:</td><td><input type="text" id="name"></td></tr>
		<tr><td>EMAIL:</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="button" value="保存数据" onclick="saveStorage();"></td></tr>
	</table>
	<hr>
	<p>检索:<input type="text" id="find">
			<input type="button" value="检索" onclick="findStorage('msg');">	
	</p>
	<p id="msg"></p>
</body>
</html>

可以看到信息已经存储在webStorage中了,信息以JSON格式保存。
下面看一下检索功能:

到此为止已经实现了简单的数据库制作。

ps:笔者最近开通了微信公众号,大家可以关注一下哦,谢谢大家的支持!

全部评论

相关推荐

感觉他们一点都不了解现在这个社会就业有多难,已经在牛客刷到好多篇&nbsp;延毕的帖子了,延毕就会导致已经找好的工作就没了,还得重新再找,学校和老师们是怎么想的呢????看到学生丢失工作会开心吗&nbsp;就业数据都在造假,真实的就业困难不去解决&nbsp;一个个真是好样的
从明天开始狠狠卷JV...:学生看到的是导师不放实习导致offer黄了。 导师看到的是招进来的学生吃自己补助和自己的招生名额,却没给自己升迁带来任何帮助,还要跑路。 根本利益的不一致,最主要留校的导师大概率是职场上招聘失败的,被迫留校的,什么牛鬼蛇神都会有
点赞 评论 收藏
分享
流浪的神仙:无恶意,算法一般好像都得9硕才能干算法太卷啦
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务