客户端信息存储之 Cookie (以JS为例）_intitle:js服务端的cookie存储-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44880296/article/details/106524866

本文详细介绍了Cookie的概念，包括其作用、构成及操作方法。讲解了如何在JS中使用document.cookie属性进行Cookie的创建、读取和删除，同时阐述了Cookie在用户信息存储及登录过程中的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

slogan： 我学编程就是为了赚钱，后来发现它不只是能赚钱…

本文目录

1. 什么是cookie

Cookie 用于存储 web 页面的用户信息。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

当用户访问 web 页面时，他的名字可以记录在 cookie 中。在用户客户端计算机暂时或永久保存。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

在 JS 中可以使用 document.cookie 属性来创建、读取、及删除 cookie。

2. Cookie 的构成

在这里插入图片描述

3. 对 Cookie 进行操作

 //设置cookie
function setCookie(cname,cvalue,exdays)
{
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}	//简单来说，通过把 cookie 名称、cookie 值和过期字符串相加，该函数就设置了 cookie。

//获取cookie
function getCookie(cname)
{
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) 
    {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
}	//将以存储的cookie字符串中的name和用户输入的name值进行比较，相同返回cookie，不同则返回空字符串

//检测cookie
function checkCookie()
{
    var username=getCookie("username");
    if (username!="")
    {
        alert("Welcome again " + username);
    }
    else 
    {
        username = prompt("Please enter your name:","");
        if (username!="" && username!=null)
        {
        setCookie("username",username,365);
        }
    }
}	//如果已设置 cookie，将显示一个问候。如果未设置 cookie，会显示一个提示框，询问用户的名字，并存储用户名 cookie 365 天，通过调用 setCookie 函数新建一个cookie。

关于删除已有的cookie，目前没有直接的方法。需要通过使用相同路径（一般即设置cookie时的url），域和安全选项再次设置cookie，并将过期时间设置为过去的时间（即设置cookie时的时间之前）一般设置为01 Jan 1970 00:00:00（计算机的初始化时间），这样就能实现对已有cookie的删除操作。