HTML5中Web Storage的用法

最新推荐文章于 2024-11-12 20:35:48 发布

chenzhong5173

最新推荐文章于 2024-11-12 20:35:48 发布

阅读量120

点赞数

文章标签：数据库 xhtml json

原文链接：https://my.oschina.net/dreamchenming/blog/676933

版权

一.cookies存储的缺点

①大小:只有4Kb大小

②宽带:cookies是随HTTP事务一起被送达的，因此会被浪费一部分送达cookies时使用的宽带。

③复杂性:要正确的操纵cookies是很困难的。

二.sessionStorage 和 localStorage的概念

1.sessionStorage是针对用户在浏览某个网页到关闭该浏览器的整个时间，sessionStorage只是保存这段时间的数据。

2..localStorage是长久保存用户访问浏览器的所有数据，除非用户主动删除它。

三..方法和属性

1.sessionStorage

保存数据:sessionStorage.setItem(key,value);

读取数据:变量 = sessionStorage.getItem(key);

2.localStorage

保存数据:localStorage.setItem(key,value);

读取数据:localStorage.getItem(key);

属性:

①localStorage.length----所有保存在localStorage中的数据条数

②locallStorage.key(key)--将想要得到数据的索引号作为index参数传入，可以得到与这个索引值对应的数值。

注意:web storage中存储的键值对都是字符串。

四.简单web留言本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简易的web留言本</title>
<script>
window.onload = function(){
	var oText = document.getElementById('text');
	var aInput = document.getElementsByTagName('input');
	var oP = document.getElementById('p');
	//数据的保存
	aInput[0].onclick = function(){
		var date = new Date().getTime();
		var msg = oText.value;
		//本地数据库存储数据
		localStorage.setItem(date,msg);
		alert('数据已经保存');
		oText.value = '';
	};
	//数据展现
	aInput[1].onclick = function(){
		
		showData();
		
	};
	//清除本地数据库的数据
	aInput[2].onclick = function(){
		//清除本地数据库
		localStorage.clear();
		alert('本地数据全部被清除');
		showData();
	};
	
	function showData(){
		var result = "<table border='1'>";
		//本地数据的属性length，里面保存数据的长度
		for(var i = 0;i < localStorage.length;i++){
			//本地数据库的属性key,对应的键名
			 var key = localStorage.key(i);
			 //传输键名获取本地数据库的键值
			 var value= localStorage.getItem(key);
			 var date = new Date();
			 date.setTime(key);
			 var dateStr = date.toGMTString();
			 result += '<tr><td>'+value+'</td><td>'+dateStr+'</td></tr>';
		}
			result += '</table>';
			oP.innerHTML = result;
	};
};
</script>
</head>

<body>
<h2>简易的web留言本</h2>
<textarea id='text' cols='60' rows='10'></textarea>
<br/>
<input type='button' value='保存'/>
<input type='button' value='显示留言'/>
<input type='button' value='初始化' />
<p id='p' style="border-top:1px solid black;"></p>
</body>
</html>

五.简易的本地数据库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简易的本地数据库</title>
<script src='JSON.js'></script>
<script>
window.onload = function(){

	var aInput = document.getElementsByTagName('input');
	var oSave = document.getElementById('save');
	var oShow = document.getElementById('show');
	var oQuery = document.getElementById('query');
	var oText = document.getElementById('text');
	var oClear = document.getElementById('clear');
	
	oSave.onclick = function(){
		saveStorage();
	};
	
	oShow.onclick = function(){
		showStorage();
	};
	
	oClear.onclick = function(){
		localStorage.clear();
		oText.innerHTML = "";
		alert('数据库已清除完毕！');
	};
	
	function saveStorage(){
		var obj = {};
		obj.num = aInput[0].value;
		obj.name = aInput[1].value;
		obj.age = aInput[2].value;
		obj.sex = aInput[3].value;
		obj.salary = aInput[4].value;
		var str = JSON.stringify(obj);
		//数据保存的键值对只能是字符串形式的。
		localStorage.setItem(obj.name,str);
		alert('数据已经保存成功！');
	};
	
	function showStorage(){
		var find1 = localStorage.getItem(oQuery.value); 
		console.log(localStorage.length);
		var sQuery = JSON.parse(find1);
		if(sQuery){
			oText.innerHTML = "编号："+ sQuery.num +"<br/>" + "姓名："+ sQuery.name +"<br/>" + "年龄："+ sQuery.age +"<br/>" + "性别："+ sQuery.sex +"<br/>" + "待遇："+ sQuery.salary ;
		}else{
			alert('对不起，您要查找的人不存在！');
			oText.innerHTML = "";
		}
	};
	
};
</script>
</head>

<body>
<h2>简易本地数据库</h2>
<table>
<tr><td>编号：</td><td><input type='text' /></td></tr>
<tr><td>姓名：</td><td><input type='text' /></td></tr>
<tr><td>年龄：</td><td><input type='text' /></td></tr>
<tr><td>性别：</td><td><input type='text' /></td></tr>
<tr><td>待遇：</td><td><input type='text' /></td></tr>
<tr><td></td><td><input type='button' value='保存' id='save'/></td></tr>
</table>
<hr />
检索：<input type='text' id='query'/><input type='button' value='查询' id='show'/>
<p id='text'></p>
<input type='button' value = '清空数据库' id='clear'>
</body>
</html>

转载于:https://my.oschina.net/dreamchenming/blog/676933