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

本文链接：https://blog.csdn.net/csdn_zy_com/article/details/103705462

一.服务器存储：

数据库：存储项目的核心数据
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}<a href="loginout.html">退出登录</a>`
			}
			
		</script>
	</body>
</html>