JavaScript Cookie与Session的使用及区别深入探究

概述

Web开发中，常常需要在用户与服务器之间保持状态，以便实现个性化的体验。在前后端分离的现代Web开发中，我们往往会在JavaScript中使用Cookie或Session来实现状态保持。而Cookie和Session虽然实现的目的相同，但它们的细节和机制存在很大的差异。在本文中，我们将介绍Cookie和Session的基本使用以及它们的区别和注意事项。

Cookie基本用法

Cookie是服务器向浏览器发送的小数据片段。它们被存在客户端的硬盘上，随着用户的访问请求被发送给服务器。Cookie由键值对构成，例如下面的代码片段定义了名为username的Cookie：

document.cookie = "username=John Doe";

读取和修改Cookie时，我们需要使用document.cookie来访问当前域名下所有的Cookie：

console.log(document.cookie);
document.cookie = "username=Jane Doe";

注意，一段JavaScript代码中可以发送多个Cookie，你只需要在document.cookie中添加多个键值对即可。而每个Cookie都占用一定空间，如果Cookie过多的话，可能会引起性能问题。

Session基本用法

Session是在服务器创建的数据结构，表示特定用户的状态。与Cookie不同，Session保存在服务器端，并被服务器用于标识和查询用户。为了使用Session，Web应用程序必须有能力检查session ID，这是一个由服务器提供的唯一的标识符。在默认情况下，session ID由PHPSESSID，JSESSIONID等命名，以表示使用的技术。Web浏览器支持在访问站点时将此ID作为cookie发送。

在后端语言中创建Session很简单，例如PHP代码中可以使用如下三行代码：

session_start();
$_SESSION['username'] = 'John';
echo $_SESSION['username'];

此代码开启了一个Session，将其用于存储用户名，并输出了它。请注意，Session在使用前必须先启动，否则你将无法调用其内容。

Cookie与Session的区别

虽然Cookie和Session的目的相同，但它们有一些比较重要的区别：

存储位置：Cookie在客户端存储，而Session在服务器端存储。
安全性：因为Cookie存储在本地，所以容易被恶意代码和黑客攻击。而Session存在于服务器中，所以相对安全。
存储大小：每个Cookie都有大小限制（通常为4KB），如果存储太多的Cookie，可能会引起性能问题。而Session的存储空间上限通常比Cookie大得多，但是如果存储的数据过于庞大，服务器可能也会出现性能问题。
生命周期：Cookie可以设置过期时间，较长时间内用户再次访问站点时，Cookie将被重新发送给服务器。而Session默认的生命周期为一次浏览器会话，当用户关闭浏览器或登录超时时，Session将被关闭。

注意事项

使用Cookie和Session的时候，需要注意以下问题：

非HTTPS环境下，Cookie可能会被劫持或篡改。因此，对于敏感数据，应该优先使用Session。
存储过多Cookie或Session会浪费网络带宽和服务器资源。你应该合理使用它们，并在安全性和可用性之间取得平衡。

示例说明

下面是两个示例，分别演示Cookie和Session的使用：

示例一：在Cookie中保存用户选项

在这个例子中，我们将使用Cookie来保存用户在网页中的选项。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Preference</title>
</head>
<body>
    <h1>Preference</h1>
    <p>Select your preferred color:</p>
    <form>
        <input type="radio" name="color" value="red">Red<br>
        <input type="radio" name="color" value="green">Green<br>
        <input type="radio" name="color" value="blue">Blue<br>
        <input type="submit" value="Save">
    </form>
    <script src="preference.js"></script>
</body>
</html>

JavaScript代码：

// 读取Cookie
function getCookie(name) {
    var cookies = document.cookie.split(';');
    for(var i=0; i<cookies.length; i++) {
        var cookie = cookies[i].trim();
        if (cookie.startsWith(name+"=")) {
            return cookie.substring(name.length+1);
        }
    }
    return "";
}

// 保存选项
function savePreference() {
    var radios = document.getElementsByName("color");
    var selected_color = "";
    for(var i=0; i<radios.length; i++) {
        if (radios[i].checked) {
            selected_color = radios[i].value;
        }
    }
    if (selected_color != "") {
        document.cookie = "color="+selected_color+"; expires=Thu, 01 Jan 2050 00:00:00 UTC";
        alert("Your preference has been saved.");
    } else {
        alert("Please select a color.");
    }
}

window.onload = function() {
    // 加载保存的选项
    var saved_color = getCookie("color");
    var radios = document.getElementsByName("color");
    for(var i=0; i<radios.length; i++) {
        if (radios[i].value == saved_color) {
            radios[i].checked = true;
        }
    }
    // 保存新选项
    var form = document.querySelector("form");
    form.addEventListener("submit", function(event) {
        event.preventDefault();
        savePreference();
    });
}

在此代码中，我们使用了document.cookie访问和修改Cookie。getCookie()方法解析了当前域名下的所有Cookie，并返回指定名称的Cookie值。savePreference()方法在用户提交表单时读取已选中的颜色，将其保存到“color”Cookie中，并在界面上弹出消息。

示例二：在Session中保存用户登录状态

在这个例子中，我们将使用Session来保存用户的登录状态。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
</head>
<body>
    <h1>Login</h1>
    <form>
        <label>Username:</label>
        <input name="username"><br>
        <label>Password:</label>
        <input type="password" name="password"><br>
        <input type="submit" value="Login">
    </form>
    <div id="login-status"></div>
    <script src="login.js"></script>
</body>
</html>

JavaScript代码：

function login() {
    var username = document.getElementsByName("username")[0].value;
    var password = document.getElementsByName("password")[0].value;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == XMLHttpRequest.DONE) {
            if (xhr.status == 200) {
                document.getElementById("login-status").innerHTML = "Login successfully.";
                // 保存Session
                var session_id = xhr.getResponseHeader("X-Session-ID");
                document.cookie = "session_id="+session_id+"; Secure";
                // 跳转到主页
                window.location.href = "index.html";
            } else {
                document.getElementById("login-status").innerHTML = "Login failed.";
            }
        }
    };
    xhr.open("POST", "/api/login");
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.send(JSON.stringify({
        username: username,
        password: password
    }));
}

window.onload = function() {
    var form = document.querySelector("form");
    form.addEventListener("submit", function(event) {
        event.preventDefault();
        login();
    });
}

在这个代码中，我们使用XMLHttpRequest对象发送了一个登录请求。当后端验证用户名和密码成功时，它会返回一个随机生成的Session ID。我们在客户端使用document.cookie将Session ID保存到名为“session_id”的Cookie中，并将此ID发送给服务器进行身份验证。你可以在其他页面中使用getCookie()方法访问此Cookie，并将Session ID发送到服务器进行身份验证。