쿠키 소개 및 JavaScript를 이용한 쿠키 작동 방법에 대한 자세한 설명

이 글에서는 주로 다음과 같은 쿠키의 용도와 작동 메커니즘, JavaScript를 사용하여 쿠키를 작동하는 다양한 방법을 간략하게 소개합니다. 요약 내용은 비교적 포괄적이므로 모든 분들께 도움이 되기를 바랍니다.

쿠키란

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

쿠키는 개인 정보와 같은 검색 정보를 저장하기 위해 방문한 웹사이트에서 생성된 파일입니다. .

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

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

쿠키 기본지식

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

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

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

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

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

쿠키에는 두 가지 유형이 있습니다. 현재 탐색 중인 웹사이트에서 설정한 쿠키

Third에서 - 웹페이지에 삽입된 광고나 이미지와 같은 다른 도메인의 파티 쿠키(웹사이트는 이러한 쿠키를 사용하여 귀하의 사용 정보를 추적할 수 있습니다)

방금 기본 지식에서 쿠키 수명주기 문제가 언급되었습니다. 대략 두 가지 상태로 나눌 수 있습니다:

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

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

브라우저 도구를 통해 쿠키를 삭제합니다. 파티 도구, 브라우저 자체에도 이 기능이 있습니다)쿠키 유효 기간을 설정하여 쿠키를 삭제하세요

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

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

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

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

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

쿠키의 기본 사용법

JavaScript를 사용하여 쿠키에 액세스하는 경우 Document 객체의 cookie 속성을 사용해야 합니다. ; 한 줄의 코드에서는 쿠키를 생성하고 수정하는 방법을 소개합니다.

document.cookie  = 'username=Darren';

要精确的对 cookie 进行读取其实很简单，就是对字符串进行操作。从w3school上copy这段代码来做分析：

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 ""
　　}

当然想实现读取cookie的方法还有不少，比如数组，正则等，这里就不往细说了。

三.设置cookie的有效期

文章中常常出现的 cookie 的生命周期也就是有效期和失效期，即 cookie 的存在时间。在默认的情况下，cookie 会在浏览器关闭的时候自动清除，但是我们可以通过expires来设置 cookie 的有效期。语法如下：

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

上面代码中的date值为GMT(格林威治时间)格式的日期型字符串，生成方式如下：

var _date = new Date();
_date.setDate(_date.getDate()+30);
_date.toGMTString();

上面三行代码分解为几步来看：

通过new生成一个Date的实例，得到当前的时间；

getDate()方法得到当前本地月份中的某一天，接着加上30就是我希望这个cookie能过在本地保存30天；

接着通过setDate()方法来设置时间；

最后 用toGMTString()方法把Date对象转换为字符串，并返回结果

通过下面这个完整的函数来说明在创建 cookie 的过程中我们需要注意的地方 – 从w3school复制下来的。创建一个在 cookie 中存储信息的函数：

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)

现在我们这个函数是按照天数来设置cookie的有效时间，如果想以其他单位（如：小时）来设置，那么改变第三行代码即可：

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

这样设置以后的cookie有效期就是按照小时为单位的。

常见问题中有提到清除 cookie 的两种方法，现在要说的是使 cookie 失效，通过把有效期的时间设置为一个已过期的时间。既然已经有了设置有效期的方法，那么设置失效期的方法就请感兴趣的朋友自己动手了^_^。下面继续比较深的cookie话题。

Cookie 高级篇

一.cookie 路径概念

在基础知识中有提到 cookie 有域和路径的概念，现在来介绍路径在 cookie 中的作用。

cookie 一般都是由于用户访问页面而被创建的，可是并不是只有在创建 cookie 的页面才可以访问这个 cookie。

默认情况下，只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问，这个是因为安全方面的考虑，造成不是所有页面都可以随意访问其他页面创建的 cookie。举个例子：

在 “//m.sbmmt.com/” 这个页面创建一个cookie，那么在”/Darren_code/”这个路径下的页面如： “//m.sbmmt.com/”这个页面默 认就能取到cookie信息。

可在默认情况下， “//m.sbmmt.com/”或者 “//m.sbmmt.com/” 就不可以访问这个 cookie（光看没用，实践出真理^_^）。

那么如何让这个 cookie 能被其他目录或者父级的目录访问类，通过设置 cookie 的路径就可以实现。例子如下：

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

红色字体path就是 cookie 的路径，最常用的例子就是让 cookie 在跟目录下,这样不管是哪个子页面创建的 cookie，所有的页面都可以访问到了:

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

二.cookie 域概念

路径能解决在同一个域下访问 cookie 的问题，咱们接着说 cookie 实现同域之间访问的问题。语法如下：

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

红色的domain就是设置的 cookie 域的值。

例如 ”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值

 以上就是Cookie介绍及JavaScript操作Cookie方法详解的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！