자바스크립트에서 쿠키를 설정하는 방법

JavaScript에서는 문서 개체의 쿠키 속성을 사용하여 쿠키를 설정, 읽기 또는 삭제할 수 있으며 구문은 "document.cookie="cookieName=Value;expires=expiration time";"입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

1. 쿠키란 무엇입니까? 웹 페이지를 브라우저에 로드하는 데 사용되는 HTTP는 "상태 비저장" 프로토콜입니다. 즉, 서버가 페이지를 브라우저에 보낼 때 해당 작업이 완료된 것으로 간주합니다. 정보가 저장됩니다. 이로 인해 사용자가 액세스하거나 다운로드한 콘텐츠를 기록하거나 비공개 영역에 사용자의 로그인 상태를 기록하는 등 브라우저 세션 중에 일종의 연속성을 유지하기가 어렵습니다.

쿠키는 이 문제를 해결하는 방법입니다. 예를 들어, 쿠키는 사용자의 마지막 방문을 기록하거나, 사용자의 기본 설정 목록을 저장하거나, 사용자가 쇼핑을 계속할 때 장바구니에 있는 항목을 저장할 수 있습니다. 쿠키를 올바르게 사용하면 사이트의 사용자 경험을 향상시킬 수 있습니다.

쿠키 자체는 페이지별로 사용자의 컴퓨터에 저장되고 다른 페이지에서 읽을 수 있는 짧은 정보 문자열입니다. 쿠키는 일반적으로 일정 기간이 지나면 만료되도록 설정되어 있습니다.

쿠키 제한

브라우저에는 저장할 수 있는 쿠키 수에 제한이 있으며 일반적으로 수백 개 이상입니다. 일반적으로 도메인당 20개의 쿠키가 허용되며, 각 도메인은 최대 4KB의 쿠키를 저장할 수 있습니다.

크기 제한으로 인해 발생할 수 있는 문제 외에도 하드디스크에 있는 쿠키가 만료일에 도달하거나, 사용자가 쿠키 정보를 삭제하거나, 다른 쿠키로 전환하는 등의 원인이 많이 있을 수 있습니다. 브라우저. 따라서 중요한 데이터를 저장하기 위해 쿠키를 사용해서는 절대 안 되며, 코드 작성 시 예상되는 쿠키를 얻을 수 없는 상황을 고려해야 합니다

2, document.cookie 속성

JavaScript에서는 문서 개체 쿠키를 사용합니다. 쿠키를 생성하고 읽고 삭제하는 속성입니다.

각 쿠키는 기본적으로 다음과 같이 한 쌍의 이름과 값으로 구성된 문자열입니다.

username=sam

페이지가 브라우저에 로드되면 브라우저는 페이지와 관련된 모든 쿠키를 수집하여 문자열에 넣습니다. - document.cookie 속성과 유사합니다. 이 속성에서 각 쿠키는 세미콜론으로 구분됩니다.

username=sam;location=China;

# document.cookie는 실제 문자열이 아니기 때문에 "문자열 같은" 속성이라고 부릅니다. 하지만 쿠키 정보를 추출할 때 이 속성은 문자열처럼 동작합니다

데이터 인코딩 및 디코딩

세미콜론, 쉼표, 공백 기호(예: 공백 및 탭)를 포함한 특정 문자는 쿠키에 사용할 수 없습니다. 쿠키에 데이터를 저장하기 전에 데이터가 올바르게 저장될 수 있도록 데이터를 인코딩해야 합니다.

정보를 저장하기 전에 JavaScript의 escape() 함수를 사용하여 인코딩하고, 원본 쿠키 데이터를 얻을 때 해당 unescape() 함수를 사용하여 디코딩하십시오.

excape() 함수는 문자열의 ASCII가 아닌 문자를 해당하는 2자리 또는 4자리 16진수 형식으로 변환합니다. 예를 들어 공백은 %20, &는 %26으로 변환됩니다.

예를 들어 다음 코드는 str 변수에 저장된 원래 문자열과 escape() 인코딩 후의 결과를 출력합니다.

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
3f1c4e4b6b16bbbd69b2ee476dc4f83a
function hello(){
	var str = 'Here is a (short) piece of text.';
	document.write(str = 'ff9d32c555bb1d9133a29eb4371c1213' + escape(str));
	}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
64cb571ed5952d9b43da1f2d70a36e91hello owrld0b9f73f8e206867bd1f5dc5957dbcb38
a378d60a65ed2f7e1382e9de1336cde9
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

공백이 %20으로 표시되고 왼쪽 대괄호가 다음과 같은 것을 볼 수 있습니다. %28, 오른쪽 괄호는 %29입니다.

3, 쿠키 구성

document.cookie의 정보는 이름과 값의 쌍으로 구성된 문자열처럼 보입니다. 각 데이터 쌍의 형식은 다음과 같습니다.

name=value

하지만 실제로는 위에서 각 쿠키에는 기타 관련 정보도 포함되어 있으며 이에 대해서는 아래에서 별도로 소개합니다.

cookieName 및 cookieValue

CookieName 및 cookieValue는 쿠키 문자열에 표시되는 name=value의 이름과 값입니다.

domain

domain 속성은 쿠키가 속한 도메인을 브라우저에 나타냅니다. 이 속성을 지정하지 않으면 기본값은 쿠키가 설정된 페이지의 도메인입니다.

이 속성의 기능은 하위 도메인별 쿠키 작동을 제어하는 ​​것입니다. 거리 측면에서 www.example.com으로 설정된 경우 하위 도메인 code.example.com의 페이지는 이 쿠키를 읽을 수 없습니다. 그러나 도메인 속성이 example.com으로 설정된 경우 code.example.com의 페이지는 이 쿠키에 액세스할 수 있습니다.

path

path 속성은 쿠키가 사용될 수 있는 디렉터리를 지정합니다. 디렉토리 문서의 페이지만 쿠키 값을 설정하려면 경로를 /documents로 설정하십시오. 이 속성은 선택사항이며 일반적으로 사용되는 기본 경로는 /입니다. 이는 쿠키가 도메인 전체에서 사용될 수 있음을 나타냅니다.

secure

    secure属性是可选的，而且几乎很少使用。它表示浏览器在把整个cookie发送给服务器时，是否应该使用SLL安全标准。

expires

    每个cookie都有一个失效日期，过期就自动删除了。expires属性要以UTC时间表示。如果没有设置这个属性，cookie的生命期就和当前浏览器会话一样长，会在浏览器关闭时自动删除。

4，编写cookie

    要编写新的cookie，只要把包含所需属性的值赋予document.cookie就可以了:

document.cookie = "username=sam;expires=15/05/2018 00:00:00"

    使用javascript的Date对象可以避免手工输入日期和时间格式；

var cookieDate = new Date(2018,05,15);
document.cookie = "username=sam;expires="+cookieDate.toUTCString();

    这样就能达到和前面一样的结果。

#注意这里使用了cookieDate.toUTCString()函数，而不是cookieDate.toString();这是因为cookie的时间要以UTC格式设置。

    在实际编码时，应该用excape()函数来确保在给cookie赋值时不会有非法字符:

var cookieDate = new Date(2018,05,15);
var user = "Sam Jones";
document.cookie = "username="+excape(user)+";expires="+cookieDate.toUTCString();

5，编写cookie的函数

    很自然就会想到编写一个函数专门用于生成cookie，完成编码和可选属性的组合操作。下面的程序清单就列出了一个这样的程序代码:

function createCookie(name,value,days,path,domain,secure){
	if(days){
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = date.toGMTString();
		}
		else var expires = "";
		cookieString = name + "=" +excape(value);
		if(expires) cookieString += ";expires=" +expires;
		if(path) cookieString += ";path=" + escape(path);
		if(domain) cookieString += ";domain=" + escape(domain);
		if(secure) cookieString += ";secure=" + escape(secure);
		document.cookie = sookieString;
		}

    这个函数的执行的操作是相当直观的，name和value参数组合得到"name = value",其中的value还经过编码以避免非法字符。

    在处理有效期时，使用的参数不是具体日期，而是cookie有效的天数。函数根据这个天数生成有效的日期字符串。

    其他属性都是可选的，如果设置了，就会附加到组成cookie的字符串里。

【推荐学习：javascript高级教程】

위 내용은 자바스크립트에서 쿠키를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!