登录时的"记住我"

 当我们在做各个系统的登录界面时,喜欢在加上一个功能就是“记住我”,

我用js来实现一下看看

function SetCookie(name, value, expires, path, domain, secure) {          // 设置cookies

    var today = new Date();

    today.setTime(today.getTime());

    if (expires) {

        expires *= 2592000;

    }

    var expires_date = new Date(today.getTime() + (expires));

    document.cookie = name + "=" + escape(value) + (expires ? ";expires=" + expires_date.toGMTString() : "" ) + (path ? ";path=" + path: "" ) + (domain ? ";domain=" + domain: "" ) + (secure ? ";secure" : "" );

}

function GetCookie(name) {                        // 获得Cookies

    var cookies = document.cookie.split(';' );

    var cookie = '' ;

    for (var i = 0; i < cookies.length; i++) {

        cookie = cookies[i].split('=' );

        if (cookie[0].replace(/^/s+|/s+$/g, '' ) == name) {

            return (cookie.length <= 1) ? "" : unescape(cookie[1].replace(/^/s+|/s+$/g, '' ));

        }

    }

    return null ;

}

// 删除Cookies

function Delcookie(name, path, domain) {

    document.cookie = name + "=" + (path ? ";path=" + path: "" ) + (domain ? ";domain=" + domain: "" ) + ";expires=Thu, 01-Jan-1970 00:00:01 GMT" ;

}

if (document.getElementById("RememberMe" ).checked) {

    SetCookie('user_name' , document.getElementById("txtUserName" ).value, 1); // 保存密码一个月

    SetCookie('user_pwd' , document.getElementById("txtPassword" ).value, 1);

}

if (GetCookie('user_name' ) != null && GetCookie('user_pwd' ) != null ) // 设置记住密码的登录页面

{

    document.getElementById("txtUserName" ).value = GetCookie('user_name' );

    document.getElementById("txtPassword" ).value = GetCookie('user_pwd' );

}


 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的前端实现 "记住我" 功能的示例代码: ```javascript // 登录请求 const login = async (username, password, rememberMe) => { const data = { username, password }; if (rememberMe) { localStorage.setItem('rememberMe', true); // 存储 rememberMe 标识到 Local Storage } const response = await fetch('/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data), }); const result = await response.json(); if (response.ok) { if (rememberMe) { setCookie('token', result.token, 365); // 存储 token 到 Cookie 中,有效期为 365 天 } return result; } else { throw new Error(result.message); } }; // 设置 Cookie const setCookie = (name, value, days) => { const date = new Date(); date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); const expires = '; expires=' + date.toGMTString(); document.cookie = name + '=' + value + expires + '; path=/; HttpOnly; Secure'; }; // 获取 Cookie const getCookie = (name) => { const nameEQ = name + '='; const ca = document.cookie.split(';'); for (let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) === ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); } return null; }; // 验证 token const verifyToken = async () => { const token = getCookie('token'); if (token) { const response = await fetch('/verify', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': CSRF_TOKEN, // 防止 CSRF 攻击 }, body: JSON.stringify({ token }), }); if (response.ok) { const result = await response.json(); return result; } else { throw new Error('Authentication failed'); } } else { throw new Error('Token not found'); } }; // 退出登录请求 const logout = async () => { const rememberMe = localStorage.getItem('rememberMe'); if (rememberMe) { localStorage.removeItem('rememberMe'); // 删除 rememberMe 标识 document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; // 删除 token } const response = await fetch('/logout', { method: 'POST' }); if (!response.ok) { throw new Error('Logout failed'); } }; ``` 注意,上述代码仅为示例,实际使用需要根据具体的后端实现进行相应的修改。另外,为了防止跨站脚本攻击(XSS),在存储和获取 Cookie ,应该对 Cookie 的值进行编码和解码。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值