首页手记 Cookie教程：新手入门全攻略

Cookie教程：新手入门全攻略

标签：

Html/CSS JavaScript 前端工具

概述

本文全面介绍了Cookie教程，涵盖Cookie的基本概念、作用、应用场景，以及如何设置、读取和删除Cookie。文章还详细探讨了Cookie可能存在的安全问题及相应的防护措施。

Cookie简介

什么是Cookie

Cookie是一个小型文本文件，存储在用户本地终端上，由Web应用服务器创建，并由浏览器保存在用户的计算机或终端设备上。Cookie的主要作用是存储用户的相关信息，以便用户在访问同一个网站时无需每次都重新登录或填写同样的信息。

Cookie的作用和应用场景

Cookie的主要用途包括：

用户认证：网站通过存储用户的登录状态来识别用户，从而实现无密码登录或保持登录状态。
购物车功能：在购物网站上，用户添加到购物车的商品信息可以存储在Cookie中，即使用户关闭浏览器或离开页面，购物车中的商品信息也不会丢失。
个性化设置：根据用户的浏览习惯，网站可以提供个性化的内容推荐，如推荐文章、广告等。
统计分析：网站可以通过Cookie收集用户的访问记录，进行数据分析，以评估网站的流量和用户行为。

Cookie的基本构成

一个Cookie由以下几部分组成：

名称-值对：每个Cookie都有一个名称和一个值。名称是唯一的标识符，用于区分不同的Cookie；值则存储具体的数据。
域名：指定Cookie所属的域名，只有在该域名下的请求才能访问该Cookie。
路径：指定Cookie所属的路径，只有在该路径下的请求才能访问该Cookie。
过期时间：指定Cookie的有效期限，过了该期限后，浏览器就会自动删除该Cookie。
HttpOnly属性：安全性属性，如果设置为true，则Cookie只能通过HTTP请求访问，不能通过JavaScript访问。
Secure属性：安全性属性，如果设置为true，则Cookie只能通过HTTPS请求访问。

使用场景实例

假设你正在开发一个简单的电子商务网站，需要实现用户登录功能。用户登录后，你可以使用Cookie来保存用户的登录状态，以便用户在后续访问时无需重新登录。

// 设置Cookie示例
document.cookie = "username=John Doe; path=/";
document.cookie = "password=secret; path=/; Secure";

如何设置Cookie

使用JavaScript设置Cookie

在JavaScript中，设置Cookie的基本语法如下：

document.cookie = "name=value; path=/; expires=Wed, 21 Oct 2025 07:28:00 GMT";

其中，name是Cookie的名称，value是Cookie的值，path=/指定了Cookie的作用路径，expires指定了Cookie的过期时间。

下面是一个更详细的示例，演示如何使用JavaScript设置一个简单的Cookie：

function setCookie(name, value, days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

// 示例：设置一个名为"username"的Cookie
setCookie("username", "John Doe", 30);

使用PHP设置Cookie

在PHP中，设置Cookie的方法如下：

<?php
// 设置一个名为"username"的Cookie
setcookie("username", "John Doe", time() + (30 * 24 * 60 * 60), "/");
?>

使用Python设置Cookie

在Python Flask框架中，设置Cookie的方法是通过response.set_cookie方法。示例代码如下：

from flask import Flask, make_response

app = Flask(__name__)

@app.route('/')
def index():
    response = make_response("Setting a cookie")
    response.set_cookie('username', 'John Doe', max_age=3600)
    return response

if __name__ == '__main__':
    app.run()

项目实例：登录页面（JavaScript）

<!-- 登录页面 HTML -->
<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
</head>
<body>
    <form id="loginForm">
        <input type="text" id="username" placeholder="Username" required>
        <input type="password" id="password" placeholder="Password" required>
        <button type="submit">Login</button>
    </form>
    <script>
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault();
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;

            // 设置Cookie
            setCookie("username", username, 30);
            setCookie("password", password, 30);

            // 提交表单或跳转页面
            alert('登录成功');
        });

        function setCookie(name, value, days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "expires=" + date.toUTCString();
            document.cookie = name + "=" + value + ";" + expires + ";path=/";
        }

        function getCookie(name) {
            var cookieArr = document.cookie.split(";");
            for (var i = 0; i < cookieArr.length; i++) {
                var cookiePair = cookieArr[i].split("=");
                if (name == cookiePair[0]) {
                    return decodeURIComponent(cookiePair[1]);
                }
            }
            return null;
        }
    </script>
</body>
</html>

PHP登录页面示例

<?php
// 设置Cookie
setcookie("username", "John Doe", time() + (30 * 24 * 60 * 60), "/", "", true, true);

// 删除Cookie
setcookie("username", "", time() - 3600, "/");
?>

Python Flask登录页面示例

from flask import Flask, request, make_response

app = Flask(__name__)

@app.route('/login', methods=['POST'])
def login():
    username = request.form.get('username')
    password = request.form.get('password')

    # 设置Cookie
    response = make_response("Logged in successfully")
    response.set_cookie('username', username, max_age=3600)
    response.set_cookie('password', password, max_age=3600)
    return response

@app.route('/logout')
def logout():
    # 删除Cookie
    response = make_response("Logged out successfully")
    response.set_cookie('username', '', max_age=0)
    response.set_cookie('password', '', max_age=0)
    return response

if __name__ == '__main__':
    app.run()

如何读取Cookie

使用JavaScript读取Cookie

要读取Cookie，可以使用JavaScript来解析document.cookie字符串，获取到相应的Cookie值。示例代码如下：

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for (var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        if (name == cookiePair[0]) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    return null;
}

// 示例：读取名为"username"的Cookie
var username = getCookie("username");
console.log("Username: " + username);

使用PHP读取Cookie

在PHP中，可以通过$_COOKIE数组直接访问Cookie值。示例代码如下：

<?php
// 执行时会输出当前名为"username"的Cookie值
echo $_COOKIE['username'];
?>

使用Python读取Cookie

在Python Flask框架中，可以通过request.cookies.get方法来读取Cookie。示例代码如下：

from flask import Flask, request

app = Flask(__name__)

@app.route('/')
def index():
    username = request.cookies.get('username')
    return f"Username: {username}"

if __name__ == '__main__':
    app.run()

如何删除Cookie

使用JavaScript删除Cookie

要删除一个Cookie，可以设置其过期时间为过去的某个时间。示例代码如下：

function deleteCookie(name) {
    document.cookie = name + "=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT;";
}

// 示例：删除名为"username"的Cookie
deleteCookie("username");

使用PHP删除Cookie

在PHP中，删除Cookie的方法与设置Cookie类似，只需将expire参数设置为过去的某个时间即可。示例代码如下：

<?php
// 删除名为"username"的Cookie
setcookie("username", "", time() - 3600, "/");
?>

使用Python删除Cookie

在Python Flask框架中，删除Cookie的方法与设置Cookie类似，只需设置max_age参数为一个过去的值即可。示例代码如下：

from flask import Flask, make_response

app = Flask(__name__)

@app.route('/')
def index():
    response = make_response("Deleting a cookie")
    response.set_cookie('username', '', max_age=0)
    return response

if __name__ == '__main__':
    app.run()

Cookie的安全性问题

Cookie可能存在的安全隐患

跨站脚本攻击（XSS）：如果网站存在XSS漏洞，攻击者可以通过向用户浏览器注入恶意脚本，窃取用户的Cookie信息。
跨站请求伪造（CSRF）：攻击者可以利用用户的Cookie信息，在用户不知情的情况下，向网站发送请求，从而执行一些恶意操作。
中间人攻击（Man-in-the-Middle, MITM）：如果用户的网络连接不安全，攻击者可以在网络传输过程中截获用户的Cookie信息。
Cookie劫持：攻击者可以通过某些方式获取到用户的Cookie信息，从而冒充用户的身份进行恶意操作。

如何保护Cookie免受攻击

使用HTTPS：启用HTTPS协议可以加密Cookie传输过程，防止中间人攻击。
设置HttpOnly属性：设置HttpOnly属性可以防止JavaScript获取Cookie信息，从而减少XSS攻击的风险。
设置Secure属性：设置Secure属性可以确保Cookie信息只能通过HTTPS协议传输，防止中间人攻击。
使用Session：在服务器端使用Session来保存用户信息，而不是直接使用Cookie。

浏览器对Cookie的安全设置

现代浏览器通常都提供了对Cookie的安全设置，例如：

HttpOnly属性：确保Cookie信息不能通过JavaScript脚本获取，从而减少XSS攻击的风险。
Secure属性：确保Cookie信息只能通过HTTPS协议传输，防止中间人攻击。
SameSite属性：限制Cookie在跨站请求中使用，从而减少CSRF攻击的风险。
过期时间设置：合理设置Cookie的过期时间，避免Cookie长期有效，减少Cookie泄露的风险。

保护Cookie免受攻击的示例

// 设置Secure和HttpOnly属性
setcookie("username", "John Doe", time() + (30 * 24 * 60 * 60), "/", "", true, true);

// 设置Secure和HttpOnly属性
response = make_response("Logged in successfully")
response.set_cookie('username', username, max_age=3600, secure=True, httponly=True)

浏览器对Cookie的安全设置示例

// 设置SameSite属性
setcookie("username", "John Doe", time() + (30 * 24 * 60 * 60), "/", "", true, true, 'Lax');

// 设置SameSite属性
response = make_response("Logged in successfully")
response.set_cookie('username', username, max_age=3600, secure=True, httponly=True, samesite='Lax')

以上是关于Cookie的一些基础知识，包括设置、读取、删除以及安全性方面的介绍。正确理解和使用Cookie对于网站开发非常重要，希望这篇文章能帮助你更好地掌握Cookie的使用方法。如果你需要进一步深入学习编程知识，可以参考相关课程。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

波斯汪

手记
篇

粉丝

67

获赞与收藏

430

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 312438 2198

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空