JavaScript 작업 쿠키 방법

쿠키란

“쿠키는 방문자의 컴퓨터에 저장되는 변수입니다. 이 쿠키는 동일한 컴퓨터가 브라우저를 통해 페이지를 요청할 때마다 전송되며 JavaScript를 사용하여 생성하고 검색할 수 있습니다. 쿠키 값.” – w3school

쿠키는 프로필 정보 등 검색 정보를 저장하기 위해 방문한 웹사이트에서 생성된 파일입니다.

JavaScript 관점에서 쿠키는 문자열 정보에 불과합니다. 이 정보는 클라이언트의 컴퓨터에 저장되며 클라이언트 컴퓨터와 서버 간에 정보를 전송하는 데 사용됩니다.

이 정보는 JavaScript의 document.cookie를 통해 읽거나 설정할 수 있습니다. 쿠키는 주로 클라이언트와 서버 간의 통신에 사용되므로 JavaScript 외에 서버측 언어(예: PHP)에서도 쿠키에 접근할 수 있습니다.

쿠키에 대한 기본 지식

쿠키에는 크기 제한이 있습니다. 각 쿠키에 저장되는 데이터는 4kb를 초과할 수 없습니다. 쿠키 문자열의 길이가 4kb를 초과하면 이 속성은 빈 문자열을 반환합니다. .

쿠키는 궁극적으로 클라이언트 컴퓨터에 파일 형태로 저장되기 때문에 쿠키를 확인하고 수정하는 것이 매우 편리합니다. 그렇기 때문에 흔히 쿠키는 중요한 정보를 저장할 수 없다고 합니다.

각 쿠키의 형식은 다음과 같습니다. <쿠키 이름>=<값>; 이름과 값은 모두 법적 식별자여야 합니다.

쿠키에는 만료일이 있습니다. 기본적으로 쿠키의 수명주기는 브라우저가 닫힐 때 종료됩니다. 브라우저를 닫은 후에도 쿠키를 사용할 수 있도록 하려면 쿠키의 만료 날짜인 쿠키의 유효 기간을 설정해야 합니다.

사실 쿠키를 만드는 방법은 변수를 정의하는 방법과 다소 유사합니다. 둘 다 쿠키 이름과 쿠키 값을 사용해야 합니다. 동일한 웹사이트에서 여러 쿠키를 생성할 수 있으며, 여러 쿠키가 동일한 쿠키 파일에 저장될 수 있습니다.

쿠키 FAQ

쿠키에는 두 가지 유형이 있습니다.

현재 탐색 중인 웹사이트에서 설정한 쿠키

웹페이지에 삽입된 광고 또는 이미지에서 및 다른 도메인의 기타 제3자 쿠키(웹사이트는 이러한 쿠키를 사용하여 귀하의 사용 정보를 추적할 수 있습니다)

기본 지식에서는 방금 쿠키 수명 주기 문제를 언급했습니다. 실제로 쿠키는 크게 두 가지 상태로 나눌 수 있습니다. :

임시 쿠키입니다. 웹사이트는 현재 사용 중에 귀하의 개인정보 중 일부를 저장하며, 이 정보는 브라우저를 닫을 때 컴퓨터에서도 삭제됩니다.

만료 시간이 설정된 쿠키. 브라우저를 닫아도 이 정보는 컴퓨터에 그대로 남아 있습니다. 로그인 이름, 비밀번호 등을 입력하면 특정 사이트에 접속할 때마다 로그인할 필요가 없습니다. 이러한 종류의 쿠키는 며칠, 몇 달 또는 심지어 몇 년 동안 컴퓨터에 남아 있을 수 있습니다.

쿠키를 삭제하는 방법에는 두 가지가 있습니다.

브라우저 도구를 통해 쿠키를 삭제합니다(타사 도구가 있음, 브라우저 자체에도 이 기능이 있습니다)

쿠키 유효기간을 설정하여 쿠키를 삭제하세요

참고: 쿠키를 삭제하면 일부 웹페이지가 제대로 작동하지 않을 수 있습니다

브라우저는 설정을 통과하여 쿠키에 대한 액세스를 허용하거나 거부할 수 있습니다.

기능적, 성능상의 이유로 사용되는 쿠키의 수를 줄이고 작은 쿠키를 사용하는 것이 좋습니다.

쿠키 인코딩에 대한 자세한 내용은 쿠키 고급편에서 별도로 소개하겠습니다.

로컬 디스크에 있는 페이지인 경우 Chrome 콘솔에서 JavaScript를 사용하여 쿠키를 읽고 쓸 수 없습니다. 해결 방법...브라우저를 변경하세요^_^.

쿠키의 기본 사용법

1. 단순 액세스 작업

JavaScript를 사용하여 쿠키에 액세스할 때 Document 객체의 쿠키 속성을 사용해야 합니다. 쿠키 생성 및 수정 방법:

document.cookie = 'username=Darren';

위 코드에서 'username'은 쿠키 이름을 나타내고 'Darren'은 이 이름에 해당하는 값을 나타냅니다. 쿠키 이름이 없으면 새 쿠키가 생성되고, 있으면 쿠키 이름에 해당하는 값이 수정됩니다. 쿠키를 여러 번 생성하려면 이 방법을 반복해서 사용하면 됩니다.

2. 쿠키 읽기 작업

쿠키를 정확하게 읽는 것은 실제로 매우 간단합니다. 문자열만 사용하면 됩니다. 분석을 위해 w3school에서 이 코드를 복사하세요.

function getCookie(c_name){
　　　　if (document.cookie.length>0){　　//先查询cookie是否为空，为空就return ""
　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　
　　　　　　if (c_start!=-1){
　　　　　　　　c_start=c_start + c_name.length+1　　//最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　
　　　　　　　　//其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。
　　　　　　　　//因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　
　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　
　　　　　　　　//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
　　　　　　}
　　　　}
　　　　return ""
　　}

물론 쿠키를 읽는 방법은 배열, 정규식 등 다양하므로 여기서는 자세히 설명하지 않겠습니다.

3. 쿠키의 유효기간을 설정합니다

기사에 자주 등장하는 쿠키의 수명주기는 유효기간과 만료기간, 즉 쿠키의 존재시간입니다. 기본적으로 쿠키는 브라우저를 닫으면 자동으로 지워지지만 만료를 통해 쿠키의 유효 기간을 설정할 수 있습니다. 구문은 다음과 같습니다.

document.cookie = "name=value;expires=date";

위 코드의 날짜 값은 GMT입니다. (그리니치 시간) 형식의 경우 생성 방법은 다음과 같습니다.

var _date = new Date();

_date.setDate(_date.getDate( )+30);

_date.toGMTString();

위의 세 줄의 코드는 여러 단계로 구분됩니다.

new Date 인스턴스를 통해 현재 시간을 가져옵니다.

getDate() 메서드는 현재 지역 월의 특정 날짜를 가져온 다음 30을 더합니다. 이 쿠키를 30일 동안 로컬에 저장할 수 있기를 바랍니다.

그런 다음 setDate() 메소드를 통해 시간을 설정합니다.

마지막으로 toGMTString() 메소드를 사용하여 Date 객체를 문자열로 변환하고 결과를 반환합니다.

사용 생성 과정을 설명하기 위한 다음의 전체 기능 쿠키 과정에서 주의해야 할 사항 – w3school에서 복사했습니다. 쿠키에 정보를 저장하는 함수 만들기:

function setCookie(c_name, value, expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
//使用方法：setCookie('username','Darren',30)

이제 우리 기능은 일수에 따라 쿠키의 유효 시간을 설정하는 것입니다. 시간 등), 세 번째 코드 줄만 변경하세요.

exdate.setHours(exdate.getHours() +expireddays);

향후 쿠키를 이렇게 설정하세요. 유효 기간은 시간 단위입니다.

FAQ에 언급된 쿠키를 삭제하는 방법에는 두 가지가 있습니다. 지금 이야기할 내용은 유효 기간을 만료된 시간으로 설정하여 쿠키를 무효화하는 것입니다. 이제 유효 기간을 설정하는 방법이 생겼으니 관심 있는 친구들이 직접 설정해 보도록 하세요^_^. 쿠키에 대한 좀 더 심층적인 주제를 계속해서 살펴보겠습니다.

쿠키 고급편

1. 쿠키 경로 개념

기본 지식에서는 쿠키가 도메인과 경로의 개념을 가지고 있다고 언급했습니다. 쿠키의 경로입니다.

쿠키는 일반적으로 사용자가 페이지를 방문할 때 생성되지만, 이 쿠키는 쿠키가 생성된 페이지에서만 접근할 수 있는 것은 아닙니다.

기본적으로 쿠키를 생성한 페이지와 동일한 디렉터리 또는 하위 디렉터리에 있는 웹 페이지에만 접근할 수 있습니다. 이는 보안상의 이유로 다른 페이지에서 생성된 모든 페이지에 마음대로 접근할 수 있는 것은 아닙니다. 쿠키. 예:

"http://www.jb51.net/Darren_code/" 페이지에 쿠키를 생성하면 "/Darren_code/" 경로 아래의 페이지는 "http:// "와 같습니다. www.jb51.net/Darren_code/archive/2011/11/07/Cookie.html" 이 페이지는 기본적으로 쿠키 정보를 얻을 수 있습니다.

기본적으로 "http://www.jb51.net" 또는 "http://www.jb51.net/xxxx/"에서는 이 쿠키에 접근할 수 없습니다(보기만 해도 소용이 없습니다. ^_^).

따라서 이 쿠키를 다른 디렉터리나 상위 디렉터리에 액세스할 수 있게 만드는 방법은 쿠키 경로를 설정하여 얻을 수 있습니다. 예는 다음과 같습니다.

document.cookie = "이름=값;경로=경로"

document.cookie = "이름=값;만료=날짜;경로 =path "

빨간색 글꼴 경로는 쿠키의 경로입니다. 가장 일반적인 예는 쿠키를 다음 디렉터리에 넣는 것입니다. 어떤 하위 페이지가 쿠키를 생성하는지, 모든 모든 페이지에 액세스할 수 있습니다:

document.cookie = "name=Darren;path=/";

2. 쿠키 도메인 개념

동일한 도메인에서 쿠키에 접근하는 문제를 해결할 수 있는 방법에 대해 계속해서 이야기해 보겠습니다. . 구문은 다음과 같습니다:

document.cookie = "name=value;path=path;domain=domain";

빨간색 도메인은 쿠키 도메인 설정 값입니다.

例如 ”www.qq.com” 与 “sports.qq.com” 公用一个关联的域名”qq.com”，我们如果想让 “sports.qq.com” 下的cookie被 ”www.qq.com” 访问，我们就需要用到 cookie 的domain属性，并且需要把path属性设置为 “/”。例：

document.cookie = "username=Darren;path=/;domain=qq.com";

注：一定的是同域之间的访问，不能把domain的值设置成非主域的域名。

三.cookie 安全性

通常 cookie 信息都是使用HTTP连接传递数据，这种传递方式很容易被查看，所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要，那么就要求使用加密的数据传输。

所以 cookie 的这个属性的名称是“secure”，默认的值为空。如果一个 cookie 的属性为secure，那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。语法如下：

document.cookie = "username=Darren;secure"

把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密，得自己加密数据。

注：就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以说到底，别把重要信息放cookie就对了，囧…

四.cookie 编码细节

原本来想在常见问题那段介绍cookie编码的知识，因为如果对这个不了解的话编码问题确实是一个坑，所以还是详细说说。

在输入cookie信息时不能包含空格，分号，逗号等特殊符号，而在一般情况下，cookie 信息的存储都是采用未编码的方式。所以，在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码，在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来。如设置cookie时：

document.cookie = name + "="+ escape (value);

再看看基础用法时提到过的getCookie()内的一句：

return unescape(document.cookie.substring(c_start,c_end));

这样就不用担心因为在cookie值中出现了特殊符号而导致 cookie 信息出错了。

个人代码

/*设置Cookie*/
function setCookie(c_name, value, expiredays, path, domain, secure) {　
 var exdate = new Date(); //获取当前时间　
 exdate.setDate(exdate.getDate() + expiredays);　 //过期时间　　
 document.cookie = c_name + "=" + //cookie名称
 escape(value) + //将cookie值进行编码
 ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()) + //设置过期时间
 ((path == null) ? '/' : ';path=' + path) + //设置访问路径
 ((domain == null) ? '' : ';domain=' + domain) + //设置访问域
 ((secure == null) ? '' : ';secure=' + secure);　 //设置是否加密
};
setCookie('test', 'name=sheng;sex=men;lancer=dullbear', 30);
setCookie('bb', 'name=sheng;sex=men', 30);
/*获取Cookie*/
function getCookie(c_name, index) {
 var cookies = document.cookie; //获取cookie值
 var cookieLen = cookies.length; //获取cookie长度
 if (cookieLen > 0) { //cookie不为空时
  var c_start = cookies.indexOf(c_name + '='); //查找需要cookie值在cookie中序号
  if (c_start > -1) { //cookie值存在时
   c_start += c_name.length + 1; //获取cookie值开始序列号
   var c_end = cookies.indexOf(';', c_start); //获取cookie值结束序列号
   if (c_end == -1) { //当cookie是最后一个时
    c_end = cookieLen; //设置cookie值结束序列号为cookie长度
   };
   var cookieStr = unescape(cookies.substring(c_start, c_end)); //获取解码cookie值
   var cookieObj = cookieStr.split(';'); //分割cookie值
   index = ((index == null) ? 0 : index); //判断index是否传值
   var goalObj = cookieObj[index]; //索引数组
   var goalStr = goalObj.split('=');
   var getcook = goalStr[1]; //获取需要取的cookie值
   return getcook;
  };
 } else {
  console.log('页面没有cookie');
 }
};
alert(getCookie('test', 0)); //打印查询cookie值