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

最新推荐文章于 2022-09-25 17:46:20 发布
最新推荐文章于 2022-09-25 17:46:20 发布
阅读量520 收藏 1
点赞数 1
分类专栏： 前端 文章标签： js html web css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Czhenjin/article/details/105565584
版权
这篇博客介绍如何利用Cookie实现七天免登录的功能。作者指出，通过实践可以巩固和加深对CSS、HTML和JavaScript知识的理解。文章展示了CSS设计、HTML结构以及引入的JavaScript文件（common.js）如何共同作用，创建了一个美观且实用的页面，当用户勾选'七天免登录'后，Cookie将保存账号和密码信息，即使刷新页面也会在7天内保持登录状态。
摘要由CSDN通过智能技术生成

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
最低0.47元/天 解锁文章
天天都有人
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cookie应用（一周内免登陆）
weixin_30675247的博客
04-14 430
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="md5.js" type="text/javascript" charset="utf-8"></script> <s...
前端如何做七天免登录
weixin_54165147的博客
03-21 2748
总之，实现七天免登录的关键在于生成带过期时间的token，并将其保存在客户端。在每次请求时携带token，并在服务端进行验证即可。如果用户勾选了“七天免登录”选项，则在服务器端将token的过期时间设置为7天后。这样，在客户端关闭浏览器、退出登录之后，再次访问网站时，仍然可以使用之前的token自动登录，而无需重新输入用户名和密码。用户首次登录时，在服务端生成一个带过期时间的token，并将该token存储在客户端的cookie或localStorage中。3.在每次请求时携带token并进行验证。
使用Cookie实现七天免登录
热门推荐
var_Xu的博客
04-16 2万+
实现效果： 用户打开页面，输入用户名和密码后点击登录，如果不勾选“七天免登录”框，则浏览器不会保存用户数据，反之则会保存用户数据，再次刷新之后浏览器会自动写入用户名以及密码。 HTML布局： <body> 用户名：<input type="text" / id="dx"><br> 密码：<input type="password" / id...
基于Cookie实现七天免登录功能
weixin_51338804的博客
05-23 1503
一：思路：用户免登录实现： 注：该案例基于登录验证功能实现 1.用户发送验证cookie信息的请求，编写对应的的Servlet进行处理； 2.如果包含Cookie，直接跳转到成功页面； 3.如果不包含Cookie信息，直接...
Cookie（2）——7天自动登录
weixin_63331779的博客
09-25 958
Cookie（2）——7天自动登录
使用Session+Cookie实现7天免登录
qq_45774645的博客
03-16 3151
session存在于服务器端，cookie存在于浏览器端。 如果我们在服务器端使用Session保存用户信息，那么在用户登录某个页面时，访问服务器的时候，就会生成一个cookie返回到浏览器端，如果没有设置cookie的过期时间，浏览器关闭的时候cookie失效。 关闭浏览器重新打开这个网站，就要重新登录，这是用户不愿意看到的。 在浏览器没有关闭的情况下，用户访问服务器，是不需要频繁登录的。服务器是通过浏览器携带的cookie找到对应的session对象。具体就是根据cookie的JSESSIONID对.
cookie实现七天免登陆
YZY010313的博客
01-13 1343
cookie实现七天免登陆
利用Cookie实现十天免登录
10-03
该资源主要利用Cookie是由服务器端生成并储存在浏览器客户端上的数据。浏览器接收到来自服务器的Cookie数据之后默认将其保存在浏览器缓存中（如果浏览器关闭，缓存消失，Cookie数据...所以可以用来实现十天免登录功能
利用cookie实现三天免登陆示例（mvc分层模式）.rar
07-22
本示例是基于MVC（Model-View-Controller）分层模式，利用Cookie技术来实现用户登录后三天内自动免登陆的效果。 MVC模式是一种常见的软件设计模式，它将业务逻辑、数据和用户界面分离，使得开发、测试和维护变得更加...
Cookie 学习案例之三天免登录
04-25
用Cookie实现 三天免登录，以及session登录练习使用解决null显示问题
Cookie实现三天免登陆(链接数据库版本)
01-07
是通过MVC框架,Oracles数据库(sqlserver,database,db2,mysql通用),读取Properties配置文件链接数据库实现的Cookie实现三天免登陆 内部含有全部源码一份已经作者微信号码,如遇到乱码等问题 可添加作者微信:LD...
JavaWeb使用Cookie模拟实现自动登录功能(不需用户名和密码)
09-01
`setMaxAge(30)`方法用于设定Cookie的有效期，30秒在这个示例中是为了简化演示，实际应用中应该设置为一个较大的值，比如几天或几周，以便用户在较长时间内保持登录状态。 4. **响应Cookie**：创建完Cookie后，我们...
简单的cookie七天免登录
m0_56621561的博客
04-13 777
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...
cookie实现简单的七天免登录
qq_41445106的博客
07-19 1373
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="input" name="" id="" value="" /><br /> &l...
cookie 设计七天免登陆
zhanglinlang的专栏
10-02 928
cookie 每次网络交互的时候，cookie 都会随http request 请求发送过来。 所以这里的思路就非常简单。 1、第一步，如果客户登录成功，就通过httpResponse 将 用户登录成功后的token存入 cookie ，过期时间可以是永久，并且将token存入到redis中，并设置过期时间为7天，这样就能保住token的过期时间是由服务器端控制。 2、如果用户第一次访问，web端...
PHP—利用cookie实现七天免登录
hero_xsx的博客
10-24 4160
在大部分系统，都会存在用户的注册登录退出。当这个系统每天都要登录，但是每次都要输出用户名密码的话，就会觉得很麻烦（在不考虑安全隐患的情况下），这是就可以设计一个免登录的方法，来有效地解决这一问题。 解决思路为，在成功登陆一次系统之后，将用户信息保存到cookie中，等到下一次登录时，系统就会先去cookie中验证登录信息，登录信息正确且没有失效时，就可以实现免登录。 具体代码实现如...
用cookie设置7天免登陆
gurenyuan123的博客
11-17 1万+
今天做项目碰到了这个问题，所以将其书写下来。         首先，要实现免登陆需要将用户名与密码保存在cookie中，然后将其保存在httpservletresponse中。        所以具体的代码如下：                                    Cookie username=new Cookie("username", user.getAccount(
HTML CSS 做好看的动态搜索框
Czhenjin的博客
03-06 2947
这些也是我个人的解读 可供小白参考。想要更多了解还是要自己练习。 （我也还是个小白 噗哈哈哈） 开始了 这里是HTML写的框架 <!DOCTYPE html> <html> <head> <meta charsert="UTF-8"> <link rel="stylesheet" href="https://cdn.bootcs...
用js简单实现一个七天免登录
最新发布
06-02
好的，下面是一个简单的实现七天免登录的 JavaScript 代码： ```javascript const CookieUtil = { // 获取指定名称的 cookie 值 get: function (name) { let cookieName = encodeURIComponent(name) + "=" let cookieStart = document.cookie.indexOf(cookieName) let cookieValue = null if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart) if (cookieEnd == -1) { cookieEnd = document.cookie.length } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd)) } return cookieValue }, // 设置 cookie 值 set: function (name, value, expires, path, domain, secure) { let cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value) if (expires instanceof Date) { cookieText += "; expires=" + expires.toGMTString() } if (path) { cookieText += "; path=" + path } if (domain) { cookieText += "; domain=" + domain } if (secure) { cookieText += "; secure" } document.cookie = cookieText }, // 删除指定名称的 cookie unset: function (name, path, domain, secure) { this.set(name, "", new Date(0), path, domain, secure) } } // 判断是否登录 function checkLogin() { let username = CookieUtil.get("username") if (username) { // 已登录 // TODO: 执行登录后的操作 } else { // 未登录 let rememberMe = CookieUtil.get("rememberMe") if (rememberMe == "true") { // 自动登录 let password = CookieUtil.get("password") // TODO: 执行自动登录后的操作 } else { // 显示登录页面 // TODO: 显示登录页面 } } } // 登录 function login() { // 获取用户名和密码 let username = document.getElementById("username").value let password = document.getElementById("password").value // TODO: 执行登录操作 // 判断是否勾选七天免登录 let rememberMe = document.getElementById("rememberMe").checked if (rememberMe) { // 设置七天免登录 let expires = new Date() expires.setTime(expires.getTime() + 7 * 24 * 60 * 60 * 1000) CookieUtil.set("username", username, expires) CookieUtil.set("password", password, expires) CookieUtil.set("rememberMe", "true", expires) } else { // 删除七天免登录 CookieUtil.unset("username") CookieUtil.unset("password") CookieUtil.unset("rememberMe") } } ``` 在页面中，需要添加以下元素： ```html <input type="text" id="username" /> <input type="password" id="password" /> <input type="checkbox" id="rememberMe" /> <label for="rememberMe">七天免登录</label> <button onclick="login()">登录</button> ``` 其中，`username` 和 `password` 用于输入用户名和密码，`rememberMe` 用于勾选七天免登录，`login()` 方法用于执行登录操作。在 `checkLogin()` 方法中，判断是否已登录，如果已登录则执行登录后的操作，否则判断是否勾选七天免登录，如果勾选则执行自动登录操作，否则显示登录页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值