HTML5 Web存储-优快云博客

本文链接：https://blog.youkuaiyun.com/bud_icelf/article/details/8889207

个人原创,欢迎转载,转载请注明出处http://blog.youkuaiyun.com/bud_icelf QQ:909648986

Web 存储

存储数据

HTML5 提供了localStorage ，sessionStorage两种方法在客户端存储数据。

例子1 使用localStorage方法存储数据

<!DOCTYPE html>
<html>
<head>
	<meta charset="gbk">
</head>
<body>
	<p id="info"></p>
	<input type="text" id="txt"/>
	<button onclick="setInfo()">设置localStorage存储数据</button>
	<script>
			if(!window.localStorage){
				info="你的浏览器不支持本地存储";
				document.getElementById("info").innerHTML=info;
			}else{
				var info=localStorage.info;
				if(info==undefined){
					info="空";
				}
				document.getElementById("info").innerHTML="localStorage存储数据:"+info;
			}
			function setInfo(){
				info=document.getElementById("txt").value;
				localStorage.info=info;
				document.getElementById("info").innerHTML="localStorage存储数据:"+info;
			}
	</script>
</body>
</html>

window.localStorage

判断浏览器是否支持本地存储

var info=localStorage.info;
获取localStorage存储信息

localStorage.info=info;
设置localStorage存储信息

例子2 使用sessionStorage方法存储数据

<!DOCTYPE html>
<html>
<head>
	<meta charset="gbk">
</head>
<body>
	<p id="info"></p>
	<input type="text" id="txt"/>
	<button onclick="setInfo()">设置sessionStorage存储数据</button>
	<script>
			if(!window.sessionStorage ){
				info="你的浏览器不支持本地存储";
				document.getElementById("info").innerHTML=info;
			}else{
				var info=sessionStorage.info;
				if(info==undefined){
					info="空";
				}
				document.getElementById("info").innerHTML="sessionStorage存储数据:"+info;
			}
			function setInfo(){
				info=document.getElementById("txt").value;
				sessionStorage.info=info;
				document.getElementById("info").innerHTML="sessionStorage存储数据:"+info;
			}
	</script>
</body>
</html>

与前例子比较本例子使用了session方法存储数据，localStorage 方法存储的数据没有时间限制。session 方法存储的数据，当用户关闭浏览器窗口后，数据会被删除。