webStorage 初步了解

webStorage基本概念

 因为cokkies存储永久数据存在 几个问题

1.大小：cookies大小被限制在4kb
2.带宽：cokkies是随HTTP一起发送，因此会浪费一部分发送cookies时的使用带宽
3.复杂性：要正确操作cookies是困难的。

 因此 HTML5提供了 一种**客户端本地**保存数据的功能。

web Storage 具体分两种 sessionStorage（临时保存）和 localStorage（永久保存）。

	<h1>webstorage 实例</h1>
		<p id="msg"></p>
		<input type="text" id="input" />
<input type="button" class="button " onclick="saveStorage('input')" value="保留数据" />
	<input type="button" class="button " onclick="loadStorage('msg')" value="读取数据" />

	/*
		session
		 1.保存数据 sessionStorage.setItem(key,value)   
		 2.读取数据 变量sessionStorage.getItem(key)  
		 local
		 1.保存数据 localStorage.setItem(key,value)
		 2.读取数据 变量localStorage.getItem(key)  
		 */
		//sessionstorage保存数据
		function saveStorage(id){
			var target=document.getElementById(id);
			var str=target.value;
			sessionStorage.setItem("message",str)
		}
		//sessionstorage保存数据
		function loadStorage(id){
			var target=document.getElementById(id);
			var msg=sessionStorage.getItem("message");
			target.innerHTML=msg
		}
		//localStorage 保存数据
		// function saveStorage(id){
		// 	var target=document.getElementById(id);
		// 	var str=target.value;
		// 	localStorage.setItem("message",str)
		// }
		// //localstorage保存数据
		// function loadStorage(id){
		// 	var target=document.getElementById(id);
		// 	var msg=localStorage.getItem("message");
		// 	target.innerHTML=msg
		// }

标题简易web留言本

<h1>留言本</h1>
		<textarea id="memo" rows="10" cols="60"></textarea>
		<input type="button"  value="追加" onclick="saveStorage('memo')"/>
		<input type="button"  value="初始化" onclick="cleanStorage('msg')"/>
			<p id="msg"></p>

function saveStorage(id){
		var data=document.getElementById(id).value;
		var time=new Date().getTime();
		localStorage.setItem(time,data);
		console.log("保存成功")
		loadStorage('msg')
		}
		function loadStorage(id){
		var result="<table border='1'>"
		console.log(localStorage.length)
			for(var i=0;i<localStorage.length;i++){
				var key=localStorage.key(i);
				var value=localStorage.getItem(key);
				var date=new Date();
				date.setTime(key);
				//toGMTString()将Date对象转换成字符串
				var datestr=date.toGMTString();
				console.log(datestr)
			result +='<tr><td>'+value+'</td><td>'+datestr+'</td></tr>';
				
			}
			result +="</table>";
			var target=document.getElementById(id)
			target.innerHTML=result
		}
		function cleanStorage(){
			localStorage.clear();
			console.log("清除成功")
			loadStorage('msg')
		}