js利用cookie实现记住用户页面操作-前端开发

下面是针对“js利用cookie实现记住用户页面操作”的完整攻略：

下面是针对“js利用cookie实现记住用户页面操作”的完整攻略：

1. 概述

在用户访问网站时，很多时候需要记录一些用户的状态信息，如登录状态、上一次访问的页面等等。这时候，使用Cookie是一种非常方便的方式。Cookie是由服务器发送给浏览器的一小段数据，存储在客户端本地的某个位置，如硬盘、内存等，可以在每次HTTP请求时自动发送到服务器端。JavaScript可以通过document.cookie对象来获取和操作cookie。接下来，我们将讨论如何通过cookie来实现“记住用户页面操作”的功能。

2. 代码实现

2.1 设置cookie

可以通过document.cookie来设置cookie，如下所示：

document.cookie = "username=Tom; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

在上面的代码中，设置了一个名为“username”的cookie，它的值是“Tom”，过期时间是2025年12月18日12:00:00，路径是网站根目录。

2.2 获取cookie

同样，在JavaScript中获取cookie也是通过document.cookie来实现的，比如下面的代码：

var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/, "$1");

上面的代码中，使用了一个正则表达式，从cookie字符串中获取了名为“username”的cookie的值。

2.3 删除cookie

要删除cookie，则可以将过期时间设置为一个已经过去的时间，如下所示：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

上面的代码中，将过期时间设置为1970年1月1日0:00:00，表示这个cookie已经过期，浏览器会自动删除它。

3. 示例说明

下面通过两个具体的示例，演示如何使用cookie实现“记住用户页面操作”的功能。

3.1 示例一：记住用户选择的背景颜色

在网站中，我们可以提供几种背景颜色供用户选择，用户选择了一个背景颜色后，刷新页面后，网站仍然显示用户上一次选择的背景颜色。

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>记住用户选择的背景颜色</title>
    <style type="text/css">
        body {
            background-color: white;
        }
        .red {
            background-color: red;
        }
        .yellow {
            background-color: yellow;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <h1>请选择一个背景颜色：</h1>
    <input class="red" type="button" value="红色">
    <input class="yellow" type="button" value="黄色">
    <input class="green" type="button" value="绿色">
    <script type="text/javascript">
        var colorBtns = document.getElementsByTagName("input");
        var bgColor = getCookie("bgColor");
        if (bgColor) {
            document.body.className = bgColor;
        }
        for (var i = 0; i < colorBtns.length; i++) {
            colorBtns[i].onclick = function() {
                var className = this.className;
                document.body.className = className;
                setCookie("bgColor", className, 7);
            }
        }
        function setCookie(cookieName, cookieValue, expiredays) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + expiredays);
            document.cookie = cookieName + "=" + escape(cookieValue) + ((expiredays==null) ? "" : ";expires=" + exdate.toUTCString());
        }
        function getCookie(cookieName) {
            var cookieValue = document.cookie.match('(^|;)\\s*' + cookieName + '\\s*=\\s*([^;]+)');
            return cookieValue ? cookieValue.pop() : '';
        }
    </script>
</body>
</html>

在这个示例中，我们用三个按钮表示三种背景颜色。当用户点击一个按钮时，背景颜色会改变，并通过setCookie()函数来设置名为“bgColor”的cookie。当用户再次访问该页面时，通过getCookie()函数来获取“bgColor”cookie的值，并根据它的值为页面的背景色赋值。

3.2 示例二：记住用户在输入框输入的内容

在网站中，有一个输入框，用户输入一些内容后，点击保存按钮，内容被保存下来。当用户再次访问该页面时，输入框中就显示上一次用户输入的内容。

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>记住用户在输入框输入的内容</title>
</head>
<body>
    <input type="text" id="inputText"/>
    <input type="button" value="保存" onclick="saveText()"/>
    <script type="text/javascript">
        var inputText = document.getElementById("inputText");
        var text = getCookie("text");
        if (text) {
            inputText.value = text;
        }
        function saveText() {
            var textValue = inputText.value;
            if (textValue) {
                setCookie("text", textValue, 7);
            } else {
                setCookie("text", "", -1);
            }
        }
        function setCookie(cookieName, cookieValue, expiredays) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + expiredays);
            document.cookie = cookieName + "=" + escape(cookieValue) + ((expiredays == null) ? "" : ";expires=" + exdate.toUTCString());
        }
        function getCookie(cookieName) {
            var cookieValue = document.cookie.match('(^|;)\\s*' + cookieName + '\\s*=\\s*([^;]+)');
            return cookieValue ? cookieValue.pop() : '';
        }
    </script>
</body>
</html>

在这个示例中，当用户输入一些内容并点击保存按钮后，通过setCookie()函数为名为“text”的cookie设置一个过期时间为7天。当用户再次访问该页面时，通过getCookie()函数获取“text”cookie的值，并将其赋值给输入框的value属性。