利用 cookie，实现在html页面记住我功能

场景：

在平时，我们经常可以在页面中看到记住我的功能，如下图示例，在客户端保存用户输入的登录信息，在我们设定的过期时间内，用户再次访问当前页面时，无需重复输入账号密码信息，方便用户下次进行登录操作，一下例子即为实现该功能记录。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面记住我功能Demo</title>
</head>
<body>
<div style="margin: 18% 43%;text-align: center;"><p><span>账号:</span><input type="text" id="account"></p><p><span>密码:</span><input type="password" id="pwd"></p><p><input type="checkbox" id="rememberMe"><span style="vertical-align: middle">记住我</span></p><br><br><p><input type="button" id="loginBtn" value="登录"></p></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script></body>
<script>$(function () {initView();$("#loginBtn").click(function () {if ($("#rememberMe").is(":checked")) {setCookie("cookie_account", $("#account").val());setCookie("cookie_password", $("#pwd").val());setCookie("rememberMe", true);} else {delCookie("cookie_account");delCookie("cookie_password");delCookie("rememberMe");}window.location.reload()});});function initView() {if (getCookie("cookie_account")) {$("#account").val(getCookie("cookie_account"));}if (getCookie("cookie_password")) {$("#pwd").val(getCookie("cookie_password"));}if (getCookie("rememberMe")) {$("#rememberMe").attr("checked", getCookie("rememberMe"));}$("#account").focus(function () {this.select();});$("#pwd").focus(function () {this.select();});}/*** 写入cookie* @param name  cookie 名* @param value  cookie 值*/function setCookie(name, value) {var Days = 30; //此 cookie 将被保存 30 天var exp = new Date();exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();}/*** 删除cookie* @param name*/function delCookie(name) {var exp = new Date();exp.setTime(exp.getTime() - 1);var cval = getCookie(name);if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();}/*** 读取cookie* @param name* @returns*/function getCookie(name) {var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));if (arr != null)return unescape(arr[2]);return null;}</script>
</html>

利用 cookie，实现在html页面记住我功能相关推荐

vue 登录页面记住密码功能
vue+iview/element 一般用来快速搭建后台管理系统,登录页的记住密码功能也是必不可少的. 记住密码快速登录功能(iview ui): 思路:首次登录,记住密码,将密码存储到cookie中 ...
java记住密码 cookie_Java Web网站怎么利用Cookie实现记住密码功能
在做java web网站开发时,为了避免每次登录都需要输入用户名和密码,我们会使用Cookie技术来实现记住密码功能,在这里小编使用简单的项目案例来教大家具体的实现过程. 前期准备 1.下载好jque ...
JavaWeb利用cookie记住账号
JavaWeb利用cookie记住账号. 首先,来看看界面什么样子. 记住账号最普遍的做法,就是在点击登录时,将账号保存到cookie中. 材料准备 <script src="${ct ...
php让手机浏览器记住密码,php 利用cookie实现网页记住用户名和密码的功能
这篇文章介绍的内容是关于php 利用cookie实现网页记住用户名和密码的功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 1.html部分记住账号密码记住用户名和密码用户 ...
php记住用户名功能,php利用cookie实现网页记住用户名和密码的功能
这篇文章介绍的内容是关于php 利用cookie实现网页记住用户名和密码的功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 1.html部分记住账号密码记住用户名和密码用户 ...
AppCan用cookie实现记住密码功能 [APP]
今天想做个在应用上记住密码的功能.想了一下,先用COOKIE来测试.COOKIE保存在客户端. 关于COOKIE在手机上安不安全的问题,以后再讨论. 其实想过在手机上创建文件保存密码,但是,没有时间, ...
php 自动登录脚本_php利用cookie实现自动登录的方法
本文实例讲述了php利用cookie实现自动登录的方法.分享给大家供大家参考.具体实现方法如下: html前端页面代码如下: enter password please specify the pas ...
爬虫：利用cookie获取人人网登录后网页信息
爬虫:利用cookie获取人人网登录后网页信息思路: 1.首先创建一个自动获取登录cookie的实例,创建请求管理器opener 2.分析网页源码,获取登录的form信息,并写入data,访问登录界 ...
java session 永不过期_Java Web Application使Session永不失效(利用cookie隐藏登录)
在做 Web Application 时,因为 Web Project 有 session 自动失效的问题,所以如何让用户登录一次系统就能长时间运行三个月,就是个问题. 后来,看到 session 失 ...
怎么在html显示已登录状态,jQuery Ajax 实现在html页面实时显示用户登录状态
当网站是全静态的html页面时,而又希望网站会员在登录之后并在所有页面头部显示登录状态,如用户名等,如果未登录就是未登录状态,下面给大家来分享实现的方法. 一.在html静态页面中加入div,并指定I ...

利用 cookie，实现在html页面记住我功能

利用 cookie，实现在html页面记住我功能相关推荐

最新文章

热门文章

利用 cookie，实现在html页面 记住我 功能

利用 cookie，实现在html页面 记住我 功能相关推荐

最新文章

热门文章

利用 cookie，实现在html页面记住我功能

利用 cookie，实现在html页面记住我功能相关推荐