cookie实现七天免登录好看,有用还能帮自己加深记忆

最新推荐文章于 2024-01-28 21:43:05 发布

原创最新推荐文章于 2024-01-28 21:43:05 发布 · 619 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #web #css

前端专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍如何利用Cookie实现七天免登录的功能。作者指出，通过实践可以巩固和加深对CSS、HTML和JavaScript知识的理解。文章展示了CSS设计、HTML结构以及引入的JavaScript文件（common.js）如何共同作用，创建了一个美观且实用的页面，当用户勾选'七天免登录'后，Cookie将保存账号和密码信息，即使刷新页面也会在7天内保持登录状态。

cookie的用法我最近才学，大家都知道刚开始学这些琐碎的知识点可能当时你是记住了可是过几天就有点忘记了，因为你当时看一遍代码也不长，当时理解了，记住了然后你过脑子再打一遍当时是会了，过一阵子你记别的去然后又忘了，而且大家应该都是先学的css和html吧，你学完他们后学js你如果不及时把他们及时结合着用你会忘记一部分css和html。所以我觉得我们可以在学会一个js效果时结合css.html自己去创作一些简单的页面。所以我用cookie做了一个好看的七天免登录页面。
这块主要是css部分有一个js文件的引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript"  src ="common.js"></script>
		<style>
			div{
				position: absolute;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%);
				border:0px;
				color:#521a00;
				box-shadow:1px 2px 20px 6px #fff;
			}
			
		</style>

这里主要是html架构，其中有一些行内样式

</head>
	<body style="background-image: url(../images/茶杯-01.jpg);background-size:1400px 1800px;">
		<div>
			<img src="../images/image/user.svg"><input type="text" style="background-color: transparent;">
			<br>
			<br>
			<img src="../images/image/钥匙.svg"><input type="password" style="background-color: transparent;">
			<br>
			<br>
			<label><input type="checkbox">七天免登录</label>
			<input type="button" value="登陆" style="background-color: transparent;color:#521a00">
		</div>

这块主要就是js部分了	  js文件的引入我是在头部写的

<script type="text/javascript">
				var aInput = document.getElementsByTagName("input");
				if(getcookie("mz1")){
					aInput[0].value=getcookie("mz1");
					aInput[1].value=getcookie("mz2");
				}
				aInput[3].onclick = function(){
					var username = aInput[0].value;
					var userpass = aInput[1].value;
					if(aInput[2].checked){
						setcookie("mz1",username,7);
						setcookie("mz2",userpass,7);
					}
				}
				console.log(document.cookie);
		</script>
	</body>
</html>

下面是我引入的js文件common.js

function setcookie(name,value,date){
				var oDate = new Date();
				oDate.setDate(oDate.getDate()+date);
				document.cookie = name+"="+value+";expires="+oDate;
			}
			
			
function getcookie(name){
				var str = document.cookie;
				var arr = str.split("; ");
				for(var i = 0; i<arr.length;i++){
					var arr1 = arr[i].split("=");
					if(arr1[0]==name){
						return arr1[1];
					}
				}
			}
			
function removecookie(name){
				setcookie(name,1,-1);
			}