쿠키는 JavaScript에서 사용됩니다.

쿠키는 브라우저가 서버에 접속한 후 서버가 브라우저에게 보내는 데이터 조각입니다. 쿠키는 http 프로토콜의 일부입니다. 클라이언트가 처음으로 서버에 요청을 보내면 서버는 클라이언트가 다음에 동일한 서버에 요청을 보낼 때 일부 정보를 저장하기 위해 클라이언트에 쿠키를 보냅니다. 서버는 클라이언트의 쿠키를 식별하여 해당 조치를 취합니다. 예를 들어, 웹사이트에 로그인하면 웹사이트에 사용자 이름과 비밀번호가 기록되므로 다음에 로그인할 때 사용자 이름과 비밀번호를 입력하지 않고도 바로 로그인할 수 있습니다.

웹 서버는 Set-Cookie HTTP 메시지 헤더를 전송하여 쿠키를 생성합니다. Set-Cookie 메시지 헤더는

Set－Cookie: NAME=VALUE;Expires=DATE;Path=PATH;Domain=DOMAIN_NAME;SECURE

NAME: 쿠키 이름, value는 쿠키 세트의 값입니다.

만료: 쿠키 만료 날짜를 결정하고 쿠키가 더 이상 서버에 전송되지 않는 시기를 지정하면 브라우저는 지정된 시간 이후에 쿠키를 삭제합니다. DATE 속성 값은 Wdy(요일), Date-Month-Year HH:MM:SS GMT와 같은 특정 형식이어야 하며, 이 형식이 아닌 경우 인식되지 않습니다. 만료 옵션이 설정되지 않은 경우 쿠키의 수명 주기는 현재 세션으로 제한되며, 브라우저를 닫으면 쿠키 파일이 자동으로 사라집니다.

Path: 쿠키 헤더를 보내는 타이밍을 제어합니다. 웹 서버는 사용자가 요청한 리소스 URL에 Path로 지정된 경로가 존재할 때만 쿠키 헤더를 보냅니다. 일반적으로 사용자가 입력한 URL의 경로 부분에 첫 번째 문자부터 시작하는 Path 속성에 의해 정의된 문자열이 포함되어 있으면 브라우저는 이를 검사를 통과한 것으로 간주합니다. Path 속성의 값이 "/"이면 웹 서버의 모든 WWW 리소스가 쿠키를 읽을 수 있습니다. 경로 옵션이 설정되지 않은 경우 Path 속성 값은 웹 서버가 브라우저에 전달한 리소스의 경로 이름으로 기본 설정됩니다.

도메인: 인터넷 도메인에서 브라우저가 액세스하는 쿠키를 읽을 수 있는 웹 서버를 결정합니다. 즉, 이 도메인의 페이지만 쿠키의 정보를 사용할 수 있습니다. 도메인 옵션이 설정되지 않은 경우 쿠키 속성값은 웹 서버의 도메인 이름으로 설정됩니다.

需要注意的是，只有在 domain 选项核实完毕之后才会对 path 属性进行比较。

보안: 값이 없는 플래그만 있으며, 보안 옵션이 포함된 쿠키는 SSL 또는 HTTPS를 통해 요청이 이루어질 때만 서버에 전송될 수 있습니다. 브라우저와 웹 서버 간의 통신 프로토콜이 암호화 인증 프로토콜인 경우에만 브라우저가 해당 쿠키를 서버에 제출함을 나타냅니다.

JavaScript에서 쿠키는 상태를 저장하고 웹 브라우저에 식별 메커니즘을 제공하는 데 사용됩니다. JavaScript에서는 document.cookie 속성을 통해 쿠키를 생성, 유지 및 삭제할 수 있습니다.

쿠키 설정:

document.cookie="userName = mavis ";

각 쿠키는 이름/값 쌍입니다. 한 번에 여러 이름/값 쌍을 설정하려면 다음 방법을 사용하세요.

document.cookie = "userName=mavis; userId = 023";

쿠키에서는 escape() 함수를 사용하여 16진수로 특수 기호를 표현할 수 있습니다. 특수 기호에는 세미콜론(;), 쉼표(,), 등호(=), 공백 등이 있습니다. 다만, escape() 인코딩을 사용한 후에는 원래의 쿠키 값을 얻으려면 값을 빼낸 후 unescape()를 사용하여 디코딩해야 합니다.

JavaScript의 escape() 함수는 문자열을 모든 컴퓨터에서 읽을 수 있도록 인코딩할 수 있습니다. 구문은 다음과 같습니다: escape(string), string은 이스케이프되거나 인코딩될 문자열입니다.

쿠키 값 가져오기:
document.cookie를 사용하여 세미콜론으로 구분된 여러 이름/값으로 구성된 문자열을 직접 가져옵니다. 이러한 이름/값 쌍에는 이 도메인 이름 아래의 모든 쿠키가 포함됩니다.

var myCookie = document.cookie;

지정된 쿠키 값 가져오기,

    //设置两个cookie
    document.cookie = "userName=mavis";
    document.cookie = "userId = 023";
    //获取cookie字符串
    var myCookie = document.cookie;
    var arrCookie = myCookie.split(";");
    var userName;
    for(var i = 0;i < arrCookie.length;i++){
    var myArr = arrCookie[i].split("=");
    //找到名称为userName的cookie，并返回值
    if(userName = myArr[0]){
        userName = myArr[1];
        break;
        }
    }
    alert("welcome " + userName);

쿠키 만료일 설정:
처음 웹사이트에 로그인할 때 우리의 ID는 웹사이트에서는 ID와 비밀번호를 저장할지 여부를 알려줍니다. JavaScript에서는 실제로 쿠키의 만료 날짜를 설정합니다.

document.cookie = "userId = 023; expiress = GMT_String";

이 명령문은 userId 쿠키를 GMT_String으로 표시되는 만료 시간으로 설정합니다. 이 시간을 초과하면 쿠키가 사라지고 더 이상 액세스할 수 없습니다. 30일 후에 만료되도록 쿠키 값을 설정합니다.

    //获取当前时间 
    var date=new Date(); 
    var expiresDays=30; 
    //将date设置为30天以后的时间 
    date.setTime(date.getTime()+expiresDays*24*3600*1000); 
    //将userId和userName两个cookie设置为30天后过期 
    document.cookie = "userId = 023; userName = mavis; expires = " + date.toGMTString();

이러한 방식으로 userId 쿠키를 삭제할 수 있습니다.

쿠키에 접근할 수 있는 경로 지정: 경로 속성을 설정하여 지정

//指定可访问该cookie的目录
document.cookie = "name = mavis; path = cookiePath"

//在整个网站都可访问
    document.cookie = "name = mavis; path = /"

쿠키에 접근할 수 있는 호스트 이름 지정: 호스트 이름은 아래의 다른 호스트를 나타냅니다. 동일한 도메인, 하나의 호스트에서 생성된 쿠키는 다른 호스트에서 액세스할 수 없지만 도메인 매개변수를 통해 제어할 수 있습니다.
예: document.cookie="name=value;domain=.baidu.com"; 이 설정을 사용하면 Baidu의 모든 호스트가 쿠키에 액세스할 수 있습니다.

예:

function getCookie(name){
        if (document.cookie.length>0){
            start=document.cookie.indexOf(name + "=")
            if (start!=-1){ 
                start=start + name.length+1 
                end=document.cookie.indexOf(";",start)
                if (end==-1) end=document.cookie.length
                    return unescape(document.cookie.substring(start,end))
            } 
        }
        return ""
    }

    function setCookie(name,value,expiredays){
        var exdate=new Date()
        exdate.setDate(exdate.getDate()+expiredays)
        document.cookie=name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    }
   setCookie("username","tank",1800); //设置cookie的值，生存时间半个小时
   alert(getCookie('test')); //取得cookie的值，显示tank

실행 시 문제가 발생하여 Chrome 브라우저에 표시되지 않습니다.

그래서 다음과 같은 이유를 온라인에서 확인해 보았는데, 크롬 브라우저에 쿠키 제한이 있어서 그랬는데, 크롬 브라우저에 설정한 쿠키가 '로컬 데이터 설정 허용'으로 설정되어 있었지만 여전히 작동하지 않았습니다. 이 글을 보시는 분들 중에 왜 그런지 알려주실 수 있는 분 계신가요? 정말 감사합니다.

은 엣지 브라우저에서 다음과 같이 표시됩니다.