web常用的三种存储方式的区别及记录登录名和密码案例

一.服务器存储:

数据库:存储项目的核心数据
session技术:存储当前用户的信息

web常用的三种存储方式 (客户端存储)

cookie存储 : 大小限制在4kb,通过请求服务器返回一个cookieID存在浏览器缓存中,占用宽带,浏览器通用IE6限制每个与,名20个cookies。
SessionStroage: 会话级别的存储数据存储只会在当前会话中,关闭浏览器数据消失
localStroage : 本地/跨会话存储 浏览器关闭数据依然存在

	localStroage.length 查看当前存储的数据个数
	
	localStroage['key'] = 'value'; 存储一个数据
	
	var a = localStroage['key']; 读取一个数据
	
	localStroage.getItem('key');读取一个数据
	
	localStroage.setItem('key','value');存储一个数据
	
	localStroage.removeItem('key');删除指定数据
	
	localStroage.clear();删除所有数据

其他存储方式的拓展:(不常用)
Google Gears:存储大小没有任何限制,但需要额外安装插件。IndexedDB技术:客户端直接存储对象,目前还不是html的标准,大小没有任何限制。

HTML5 Webstroage技术 : 使用简单,大小不能超过8mb

userDate是IE的专用特性,用的人较少,现在用的最多的flash的本地存储,空间是cookie的25倍,已被淘汰。

web会话 : 客户端浏览器从连接某个web服务器开始,一系列的响应过程,直到客户端关闭浏览器,回话结束

cookie、localStorage、sessionStorage区别

相同:在本地(浏览器端)存储数据
不同:
localStorage、sessionStorage

localStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取/修改到同一份localStorage数据。

sessionStorage比localStorage更严苛一点,除了协议、主机名、端口外,还要求在同一窗口(也就是浏览器的标签页)下。

localStorage是永久存储,除非手动删除。

sessionStorage当会话结束(当前页面关闭的时候,自动销毁)

cookie的数据会在每一次发送http请求的时候,同时发送给服务器而localStorage、sessionStorage不会。

//主页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
		<!--
			创建一个index.html页面,右上角一个超链接‘登录’,点击跳转到登录页login.html,用户在表单中输入登录信息,点击提交按钮,
			假设用户名和密码都是正确的情况下,弹出登录成功,,3秒钟之后跳转回首页,右上角显示“欢迎***,退出登录”,点击退出登录,则跳转到loginout.html
			,提示您已经退出登录,3秒钟以后跳转回index.html页面,回到最初
		-->
			//如果用户已存在,则无需看到此页面
			var n = sessionStorage['LoginName'];
			if(n){
				location.href = "02index.html";
			}
		</script>
		<h3>用户登录</h3>
		<hr />
		用户名:<input type="text" id="uname" />
		密码:<input type="password" id="upwd" />
		<input type="submit" id="btnsubmit" value="提交" />
		<script>
			var btnsubmit = document.getElementById("btnsubmit");
			btnsubmit.onclick = function(){
				alert("登录成功");
				var uname = document.getElementById("uname").value;
				sessionStorage['LoginName'] = uname;
				setTimeout(function(){
					location.href = "02index.html";
				},3000)
			}
		</script>
	</body>
</html>


//页面二
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<header>
			<a href="login.html">去登录</a>
		</header>
		<section>
			<h1>首页</h1>
		</section>
		<script>
			var uname = sessionStorage['LoginName'];
			if(uname){
				var header = document.querySelector("header");
				header.innerHTML = `欢迎${uname}退出登录`
			}
			
		</script>
	</body>
</html>

你可能感兴趣的:(存储)