前端 js 项目中怎么样操作 cookie

JavaScript在前端项目中操作cookie包括创建、读取、修改和删除cookie。 其中详细描述创建cookie的步骤：首先，创建cookie需要使用document对象的cookie属性，并为它赋值一个字符串，该字符串应遵循“name=value”格式。例如：document.cookie = "username=John Doe"; 您还可以设置cookie的有效期（使用expires属性）、路径（path）、域（domAIn）和安全性（secure）。例如：document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/"。设置expires属性是非常重要的，因为若不设置，则cookie将在浏览器关闭时被删除。

一、创建COOKIE

创建cookie相对简单，关键是要掌握cookie的各个属性以及其含义。

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

上述函数可以用来创建一个新的cookie，其中name和value分别是cookie的名称和值，days指定了cookie的过期时间。

二、读取COOKIE

读取cookie则需要解析document.cookie字符串，通常这个字符串包括多个“name=value”的对，通过分号分隔。

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var 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;
}

这个函数可以检索指定名称的cookie值。如果找到了这个名称对应的cookie，它就会返回相应的值。

三、修改COOKIE

修改cookie实质上和创建cookie是一样的，使用相同的方法。

function updateCookie(name, value, days) {
    setCookie(name, value, days);
}

只需调用创建cookie的函数，并传入新的值和过期天数即可。如果cookie的名称存在，它的值和其他参数将会被更新。

四、删除COOKIE

删除cookie通常是通过设置其过期时间为过去的某个时间来实现的。

function eraseCookie(name) {
    document.cookie = name+'=; Max-Age=-99999999;';
}

该函数通过将cookie的Max-Age属性设置为负数，从而立即删除cookie。

五、COOKIE的属性

除了基本的名称和值之外，cookie还有若干设置项可以配置。

设置有效期

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC";

有效期（Expires） 或是最大年龄（Max-Age），用来确定cookie何时应该被删除。

设置路径

document.cookie = "username=John Doe; path=/";

路径（Path） 属性定义了哪些路径下的页面会发送这个cookie。

设置域

document.cookie = "username=John Doe; domain=example.com";

域（Domain） 属性定义了哪些域下的页面可以接受这个cookie。

设置安全标志

document.cookie = "username=John Doe; secure";

安全标志（Secure） 确保cookie仅通过安全的HTTPS连接被发送。

六、COOKIE的安全性

虽然cookie很有用，但也存在安全风险。比如，通过跨站脚本攻击 (XSS)，恶意脚本可能会尝试读取其他网站设置的cookie。

为了缓解这种风险，可以设置HttpOnly标志。

document.cookie = "username=John Doe; HttpOnly";

设置HttpOnly标志后，cookie不能通过客户端脚本访问，这可以很大程度上减少XSS攻击的危险。

此外，为了防止跨站请求伪造 (CSRF) 攻击，建议使用token而不是仅依赖cookie进行身份验证。

七、COOKIE与现代Web开发

在现代Web开发中，尽管cookie仍然非常重要，但许多情况下已经被LocalStorage和SessionStorage这样的Web存储解决方案取代。

与cookie相比，这些技术允许在客户端储存更多数据，而且它们提供更为复杂的接口用于数据的读取与修改，同时也有更好的安全性。

八、结论

正确和安全地操作cookie是前端开发中的重要技能。 理解cookie的创建、读取、修改和删除过程，能够帮助开发者在开发过程中更好地管理用户的会话状态。同时，关注安全性并使得应用更加健壮对于保护用户数据来说至关重要。随着Web技术的发展，开发者也应当考虑到更现代的存储方案，以替代或补充传统的cookie使用。