javascript의 cookie_javascript 기술에 대해 자세히 토론하세요.

JavaScript의 또 다른 메커니즘인 쿠키는 실제 전역 변수의 요구 사항을 충족할 수 있습니다. 쿠키는 문서 개체의 쿠키 속성을 JavaScript에 제공하는 브라우저에서 제공하는 메커니즘입니다. JavaScript로 제어할 수 있으며 JavaScript 자체의 속성은 아닙니다.

쿠키 개요

이전 섹션에서는 쇼핑 열 데이터를 저장하기 위해 불변 프레임워크를 사용했지만 제품 표시 페이지는 지속적으로 변경되어 전역 변수를 시뮬레이션하는 기능을 달성할 수 있지만 엄격하지는 않습니다. 예를 들어 탐색 프레임 페이지에서 마우스 오른쪽 버튼을 클릭하고 바로 가기 메뉴에서 [새로 고침] 명령을 클릭하면 모든 JavaScript 변수가 손실됩니다. 따라서 엄격한 페이지 간 전역 변수를 구현하려면 이 방법을 사용할 수 없습니다. JavaScript의 또 다른 메커니즘: 쿠키는 실제 전역 변수의 요구 사항을 충족할 수 있습니다.

쿠키는 브라우저에서 제공하는 메커니즘으로 문서 개체의 쿠키 속성을 JavaScript에 제공합니다. JavaScript로 제어할 수 있으며 JavaScript 자체의 속성은 아닙니다. 쿠키는 사용자의 하드 드라이브에 저장된 파일로, 일반적으로 브라우저가 해당 도메인 이름에 다시 액세스하면 쿠키를 사용할 수 있습니다. 따라서 쿠키는 하나의 도메인 이름 아래 여러 웹 페이지에 걸쳐 있을 수 있지만 여러 도메인 이름에 걸쳐 사용할 수는 없습니다.

브라우저마다 쿠키를 다르게 구현하지만 해당 속성은 동일합니다. 예를 들어 Windows 2000 및 Windows XP에서는 쿠키 파일이 document 및 settingsuserNamecookie 폴더에 저장됩니다. 일반적인 이름 지정 형식은 userName@domain.txt입니다.

쿠키 메커니즘은 사용자의 하드 드라이브에 정보를 저장하므로 전역 변수로 사용할 수 있다는 점이 가장 큰 장점 중 하나입니다. 다음과 같은 상황에서 사용할 수 있습니다.

(1) 사용자 로그인 상태를 저장합니다. 예를 들어, 사용자 ID는 쿠키에 저장되므로 사용자가 다음에 해당 페이지를 방문할 때 다시 로그인할 필요가 없습니다. 현재 많은 포럼과 커뮤니티에서 이 기능을 제공하고 있습니다. 쿠키는 만료 시간을 설정할 수도 있습니다. 제한 시간이 만료되면 쿠키는 자동으로 사라집니다. 따라서 시스템은 종종 사용자에게 로그인 상태를 유지하라는 메시지를 표시할 수 있습니다. 일반적인 옵션은 1개월, 3개월, 1년 등입니다.

(2) 사용자 행동을 추적합니다. 예를 들어, 일기 예보 웹사이트는 사용자가 선택한 지역을 기반으로 현지 기상 조건을 표시할 수 있습니다. 매번 위치를 선택해야 한다면, 쿠키를 사용하면 매우 사용자 친화적이 될 것입니다. 시스템은 다음 번에 페이지를 열 때 자동으로 표시합니다. 해당 지역의 마지막 사용자. 모든 것이 백그라운드에서 이루어지기 때문에 이러한 페이지는 사용자만큼 맞춤화되어 사용이 매우 편리합니다.

(3) 맞춤형 페이지. 웹사이트가 스킨 변경이나 레이아웃 변경 기능을 제공하는 경우 배경색상, 해상도 등 이용자의 선택사항을 기록하기 위해 쿠키를 사용할 수 있습니다. 사용자가 다음에 방문할 때 마지막 방문의 인터페이스 스타일이 계속 저장될 수 있습니다.

(4) 장바구니를 만듭니다. 이전 예시와 마찬가지로 쿠키는 사용자가 구매해야 하는 품목을 기록하는 데 사용되며, 결제 시 균일하게 제출될 수 있습니다. 예를 들어, Taobao는 쿠키를 사용하여 사용자가 탐색한 제품을 기록하고 언제든지 비교할 수 있도록 합니다.

물론 위 애플리케이션은 쿠키가 완성할 수 있는 애플리케이션 중 일부일 뿐이며, 전역 변수를 필요로 하는 기능이 더 많이 있습니다. 쿠키의 단점은 주로 보안 및 개인 정보 보호에 중점을 둡니다. 주로 다음 카테고리를 포함합니다:

(1) 쿠키가 비활성화될 수 있습니다. 사용자가 개인정보 보호를 중요하게 생각하는 경우 브라우저의 쿠키 기능이 비활성화될 가능성이 높습니다.
(2) 쿠키는 브라우저와 관련되어 있습니다. 이는 동일한 페이지를 방문하더라도 서로 다른 브라우저에 저장된 쿠키가 서로 접근할 수 없음을 의미합니다.
(3) 쿠키는 삭제될 수 있습니다. 각 쿠키는 하드 드라이브에 있는 파일이므로 사용자가 삭제할 가능성이 높습니다.
(4) 쿠키 보안이 충분히 높지 않습니다. 모든 쿠키는 일반 텍스트 형태로 파일에 기록되므로 사용자 이름, 비밀번호, 기타 정보를 저장하려면 미리 암호화하는 것이 가장 좋습니다.

쿠키 설정

각 쿠키는 이름/값 쌍입니다. document.cookie에 다음 문자열을 할당할 수 있습니다.

document.cookie="userId=828"

한 번에 여러 이름/값 쌍을 저장하려면 세미콜론과 공백(;)을 사용하여 구분할 수 있습니다. 예:

document.cookie="userId=828; userName=hulk"; 

쿠키 ​​이름이나 값에는 세미콜론(;), 쉼표(,), 등호(=), 공백을 사용할 수 없습니다. 쿠키 이름으로 하면 쉽지만, 저장되는 값은 정의되어 있지 않습니다. 이 값을 저장하는 방법은 무엇입니까? 방법은 escape() 함수를 사용하여 일부 특수 기호의 16진수 표현을 사용할 수 있는 인코딩을 사용하는 것입니다. 예를 들어 공백은 쿠키 값에 저장될 수 있는 "20%"로 인코딩되며 이 솔루션을 사용하면 또한 중국어 왜곡 문자의 출현을 피하십시오. 예:

document.cookie="str="+escape("I love ajax");

다음과 동일:

document.cookie="str=I%20love%20ajax";

当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值，这在前面已经介绍过。

尽管document.cookie看上去就像一个属性，可以赋不同的值。但它和一般的属性不一样，改变它的赋值并不意味着丢失原来的值，例如连续执行下面两条语句：

document.cookie="userId=828"; 
document.cookie="userName=hulk";

这时浏览器将维护两个cookie，分别是userId和userName，因此给document.cookie赋值更像执行类似这样的语句：

document.addCookie("userId=828"); 
document.addCookie("userName=hulk");

事实上，浏览器就是按照这样的方式来设置cookie的，如果要改变一个cookie的值，只需重新赋值，例如：

document.cookie="userId=929"; 

这样就将名为userId的cookie值设置为了929。

获取cookie的值

下面介绍如何获取cookie的值。cookie的值可以由document.cookie直接获得：

var strCookie=document.cookie;

这将获得以分号隔开的多个名/值对所组成的字符串，这些名/值对包括了该域名下的所有cookie。例如：

从输出可知，只能够一次获取所有的cookie值，而不能指定cookie名称来获得指定的值，这正是处理cookie值最麻 烦的一部分。用户必须自己分析这个字符串，来获取指定的cookie值，例如，要获取userId的值，可以这样实现：

这样就得到了单个cookie的值。

用类似的方法，可以获取一个或多个cookie的值，其主要的技巧仍然是字符串和数组的相关操作。

给cookie设置终止日期

到现在为止，所有的cookie都是单会话cookie，即浏览器关闭后这些cookie将会丢失，事实上这些cookie仅仅是存储在内存中，而没有建立相应的硬盘文件。

在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现：

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

其中GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问。例如：如果要将cookie设置为10天后过期，可以这样实现：

<script language="JavaScript" type="text/javascript"> 
<!-- 
//获取当前时间 
var date=new Date(); 
var expiresDays=10; 
//将date设置为10天以后的时间 
date.setTime(date.getTime()+expiresDays*24*3600*1000); 
//将userId和userName两个cookie设置为10天后过期 
document.cookie="userId=828; userName=hulk; expires="+date.toGMTString(); 
//--> 
</script>

删除cookie

为了删除一个cookie，可以将其过期时间设定为一个过去的时间，例如：

<script language="JavaScript" type="text/javascript"> 
<!-- 
//获取当前时间 
var date=new Date(); 
//将date设置为过去的时间 
date.setTime(date.getTime()-10000); 
//将userId这个cookie删除 
document.cookie="userId=828; expires="+date.toGMTString(); 
//--> 
</script>

指定可访问cookie的路径

默 认情况下，如果在某个页面创建了一个cookie，那么该页面所在目录中的其他页面也可以访问该cookie。如果这个目录下还有子目录，则在子目录中也 可以访问。例如在www.xxxx.com/html/a.html中所创建的cookie，可以被www.xxxx.com/html/b.html或 www.xxx.com/ html/ some/c.html所访问，但不能被www.xxxx.com/d.html访问。

为了控制cookie可以访问的目录，需要使用path参数设置cookie，语法如下：

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

其中cookieDir表示可访问cookie的目录。例如：

document.cookie="userId=320; path=/shop"; 

就表示当前cookie仅能在shop目录下使用。

如果要使cookie在整个网站下可用，可以将cookie_dir指定为根目录，例如：

document.cookie="userId=320; path=/";

指定可访问cookie的主机名
和 路径类似，主机名是指同一个域下的不同主机，例如：www.google.com和gmail.google.com就是两个不同的主机名。默认情况下， 一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制，其语法格式为：

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

以google为例，要实现跨主机访问，可以写为：

document.cookie="name=value;domain=.google.com"; 

这样，所有google.com下的主机都可以访问该cookie。

综合示例：构造通用的cookie处理函数

cookie的处理过程比较复杂，并具有一定的相似性。因此可以定义几个函数来完成cookie的通用操作，从而实现代码的复用。下面列出了常用的cookie操作及其函数实现。

1．添加一个cookie：addCookie(name,value,expiresHours)

该函数接收3个参数：cookie名称，cookie值，以及在多少小时后过期。这里约定expiresHours为0时不设定过期时间，即当浏览器关闭时cookie自动消失。该函数实现如下：

<script language="JavaScript" type="text/javascript"> 
<!-- 
function addCookie(name,value,expiresHours){ 
var cookieString=name+"="+escape(value); 
//判断是否设置过期时间 
if(expiresHours>0){ 
var date=new Date(); 
date.setTime(date.getTime+expiresHours*3600*1000); 
cookieString=cookieString+"; expires="+date.toGMTString(); 
} 
document.cookie=cookieString; 
} 
//--> 
</script>

2．获取指定名称的cookie值：getCookie(name)

该函数返回名称为name的cookie值，如果不存在则返回空，其实现如下：

<script language="JavaScript" type="text/javascript"> 
<!-- 
function getCookie(name){ 
var strCookie=document.cookie; 
var arrCookie=strCookie.split("; "); 
for(var i=0;i<arrCookie.length;i++){ 
var arr=arrCookie[i].split("="); 
if(arr[0]==name)return arr[1]; 
} 
return ""; 
} 
//--> 
</script>

3．删除指定名称的cookie：deleteCookie(name)

该函数可以删除指定名称的cookie，其实现如下：

<script language="JavaScript" type="text/javascript"> 
<!-- 
function deleteCookie(name){ 
var date=new Date(); 
date.setTime(date.getTime()-10000); 
document.cookie=name+"=v; expires="+date.toGMTString(); 
} 
//--> 
</script>

以上所述就是本文的全部内容了，希望大家能够喜欢。