静态页面利用JS读取cookies记住用户信息

  1. 静态页面读取cookie的基本原理

在使用JavaScript读取cookie之前,我们需要先了解什么是cookie。Cookie是指客户端保存在浏览器中的一小段文本数据,由Web服务器生成并存储在用户计算机上,当下次用户访问相同的站点时,服务器可读取此cookie的值,来判断用户是否合法,以及是否登录过等。

读取cookie需要使用JavaScript中的document.cookie属性。该属性可以返回当前网页保存的所有cookie,以字符串的形式表示。cookie通常是由名称、值、过期时间、路径和域等多个字段构成的。为了方便读取cookie,我们可以自定义一个函数来实现字符串转换为json格式的cookie,以便更方便的进行读取:

function cookieToJSON () {
    var cookies = document.cookie.split(';');
    var cookieJSON = {};
    for (var i = 0; i < cookies.length; i++) {
        var parts = cookies[i].split('=');
        cookieJSON[parts.shift().trim()] = decodeURI(parts.join('='));
    }
    return cookieJSON;
}

上述代码中,document.cookie.split(";")会把所有的分号拆开,在经过循环遍历后将一个个的cookie用等号分成数组,根据数组索引的位置,将去掉首位空格的name作为cookie的键,将值解码为字符串后作为cookie的值,最后组装成一个json格式返回。

  1. 利用JS读取cookie并记住用户信息的示例

(1)用户登录页面

在用户登录页面,通常需要用户输入用户名和密码,然后将这些信息提交到后台进行验证,验证通过后再存储用户信息。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录页面</title>
    </head>
    <body>
        <form>
            <label for="username">用户名:</label>
            <input type="text" id="username">
            <br>
            <label for="password">密码:</label>
            <input type="password" id="password">
            <br>
            <button type="button" onclick="login()">登录</button>
        </form>
        <script>
            function login() {
                // 根据用户输入的用户名和密码进行验证,如验证通过则存储cookie
                var username = document.getElementById("username").value;
                var password = document.getElementById("password").value;
                if (username === 'admin' && password === '123456') {
                    var user = {
                        username: username,
                        timestamp: new Date().getTime() // 记录当前时间戳,用于判断是否过期
                    };
                    document.cookie = "user=" + encodeURIComponent(JSON.stringify(user)) // 存储cookie
                    alert('登录成功');
                    window.location.href = 'index.html'; // 跳转到主页
                } else {
                    alert('用户名或密码错误');
                }
            }
        </script>
    </body>
</html>

上述代码中,用户输入用户名和密码后,点击登录按钮时,调用login函数进行验证。如果验证通过,则生成一个名为user的cookie,并将用户信息存储为json格式。然后通过window.location.href将页面跳转到主页index.html。

(2)首页读取cookie并显示用户信息

在首页中,我们可以通过JS读取cookie,判断用户是否已经登录,并将用户信息显示出来。如果用户已经登录,则可以直接显示用户信息,否则显示登录按钮,引导用户进行登录。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>首页</title>
    </head>
    <body>
        <div id="user-info"></div>
        <div id="login-btn"></div>
        <script>
            // 读取cookie并显示用户信息
            var cookieJSON = cookieToJSON();
            if (cookieJSON.user) {
                var user = JSON.parse(cookieJSON.user);
                if (new Date().getTime() - user.timestamp > 3600 * 1000) { // 判断登录是否过期
                    document.cookie = "user=;expires=Thu, 01 Jan 1970 00:00:01 GMT"; // 登录已过期,清除cookie
                } else {
                    var loginStr = user.username + ',欢迎回来!';
                    document.getElementById('user-info').innerHTML = loginStr;
                    document.getElementById('login-btn').innerHTML = '<button onclick="logout()">退出登录</button>';
                }
            } else {
                document.getElementById('login-btn').innerHTML = '<button onclick="window.location.href=\'login.html\'">登录</button>';
            }

            // 退出登录
            function logout() {
                document.cookie = "user=;expires=Thu,01 Jan 1970 00:00:01 GMT"; // 清除cookie
                alert('退出登录成功');
                window.location.reload(); // 刷新页面
            }
        </script>
    </body>
</html>

上述代码中,通过调用cookieToJSON函数读取当前网站的cookie,并判断是否存在名为user的cookie。如果存在,则表示用户已经登录,将用户名和欢迎语显示出来,并显示退出登录按钮;如果不存在,则显示登录按钮,引导用户进行登录。当用户点击退出登录按钮时,调用logout函数,将已登录的cookie清除,并刷新页面即可。

值得注意的是,在存储cookie时,我们没有将过期时间设为10年或更长的时间,而是只设置到了1个小时,因为长时间的cookie不仅存在安全隐患,而且可能会影响用户的体验。当然,这个时间可以根据实际情况进行修改。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:静态页面利用JS读取cookies记住用户信息 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • js屏蔽F12审查元素,禁止修改页面代码等实现代码

    实现屏蔽F12审查元素和禁止修改页面代码需要结合JavaScript和HTML的相关特性。以下是一个完整的攻略: 1. 使用JavaScript禁止页面右键功能 在页面中加入以下JavaScript代码,可以禁止页面的右键功能: document.oncontextmenu = function () { return false; } 以上代码中,docu…

    JavaScript 2023年6月10日
    00
  • Javascript前端经典的面试题及答案

    以下是“Javascript前端经典的面试题及答案”的完整攻略。 背景介绍 Javascript 是一门功能强大的编程语言,主要应用于前端开发和后端开发中,被广泛运用于 Web 应用程序中。因为 Javascript 语言特殊的运行机制和概念,Javascript 常常被用来考察前端开发者的能力和经验。 本文提供了一些 Javascript 来自于面试的经典…

    JavaScript 2023年5月27日
    00
  • JavaScript对JSON数据进行排序和搜索

    下面是关于JavaScript对JSON数据进行排序和搜索的完整攻略: 排序 要对JSON数据进行排序,可以先将其转换为数组,然后使用sort()方法进行排序。以下是具体的步骤: 将JSON数据解析为JavaScript对象。 let data = ‘{"name": "Alice", "age":…

    JavaScript 2023年5月27日
    00
  • 基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

    让我详细讲解一下。 一、前言 本文主要介绍基于 BootStrap Metronic 开发框架中下拉列表 Select2 插件的使用。Select2 是一个基于 jQuery 的下拉列表插件,不仅支持搜索、多选等功能,还支持 Ajax 数据加载。 二、Select2 的基本使用 1. 引入 Select2 插件相关文件 在使用 Select2 插件前,需要先…

    JavaScript 2023年6月11日
    00
  • 详解JavaScript正则表达式之RegExp对象

    详解JavaScript正则表达式之RegExp对象 什么是正则表达式? 正则表达式是一种字符串匹配的模式。在JavaScript中,我们可以使用RegExp对象来创建和使用正则表达式。 创建RegExp对象 在JavaScript中,我们有两种方式来创建一个RegExp对象: 使用字面量方式 let regExp = /pattern/flags; 其中,…

    JavaScript 2023年6月10日
    00
  • Android中Okhttp3实现上传多张图片同时传递参数

    完整攻略: 导入Okhttp3库 首先需要在项目中导入Okhttp3库。在build.gradle文件中添加以下依赖: implementation ‘com.squareup.okhttp3:okhttp:4.9.1’ 实现上传多张图片 使用Okhttp3上传多张图片可以借助MultipartBody方式,具体实现过程如下: //创建OkHttpClien…

    JavaScript 2023年6月10日
    00
  • 用javascript实现计算两个日期的间隔天数

    使用JavaScript可以通过对日期对象进行操作来计算两个日期的间隔天数。下面将给出一个完整的攻略,包含以下步骤: 创建两个日期对象 可以使用 new Date() 来创建日期对象。例如,我们要计算从今天(2019年4月10日)到某一天(例如2019年5月1日)的间隔天数,可以按照如下方式创建日期对象: var startDate = new Date(‘…

    JavaScript 2023年5月27日
    00
  • 获取阴历(农历)和当前日期的js代码

    获取阴历(农历)和当前日期是网站中常见的功能之一。使用JavaScript实现这个功能需要借助第三方库或者手写算法。 一、使用第三方库 推荐使用lunar-calendar这个JavaScript库,该库提供了方便的API实现将阳历日期转换为阴历日期。在获取当前日期的情况下,可以直接使用JavaScript的Date对象获取。具体步骤如下: 下载lunar-…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部