HTML 5 中WebStorage实现数据本地存储

webstorage 分sessionStorage和localstorage，sessionStorage是暂时保存，localStorage是永久保存。 sessionStorage假设浏览器关闭了，数据就没有了。而localStorage则不会。

sessionStorage：
保存数据     sessionStorage.setItem(key, value);
读取数据     sessionStorage.getItem(key);
localStorage：
保存数据     localStorage.setItem(key, value);
读取数据     localStorage.getItem(key);

 

演示样例

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script language="JavaScript">
			
			function saveStorage(id){
				var target = document.getElementById(id);
     		    var str = target.value;
                sessionStorage.setItem("msg", str);
			}
			
			function loadStorage(id){
				var target = document.getElementById(id);
     			var msg = sessionStorage.getItem("msg");
     			target.innerHTML = msg;
			}
			
		</script>
	</head>
	<body>
		<p id="msg"></p>
		<input type="text" id="input"/>
		<button onclick="saveStorage('input')">保存数据</button>
		<button onclick="loadStorage('msg')">获取数据</button>
	</body>
</html></span>

假设使用得好，也可将webStorage作为一个简易的数据库，键的值採用JSON字符串就能够。当然这仅仅是能够实现，运用的时候，webStorage的空间还是非常珍贵的。一般大多数浏览器都仅仅提供5M左右的空间。

posted on 2018-01-19 19:38  yjbjingcha  阅读(125)  评论(0)  编辑  收藏  举报

导航