利用web storage制作简易数据库

傷城~ 2022-04-14 03:15 239阅读 0赞

**利用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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70]

可以看到信息已经存储在webStorage中了，信息以JSON格式保存。  
下面看一下检索功能：  
![在这里插入图片描述][20181123162127560.png]

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

**ps：笔者最近开通了微信公众号，大家可以关注一下哦，谢谢大家的支持！**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70]: /images/20220414/fd557285a6fc4aff858e4bd0eb17a1cc.png
[20181123162127560.png]: /images/20220414/6b294a7b698343b4aa08ab3619594397.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 1]: /images/20220414/d0e424fb9ce44eb9a936e4b84d283c3e.png