JavaScript 쿠키는 캐싱에서 중요한 역할을 합니다. 이 기사에서는 이에 대해 몇 가지 소개합니다.
쿠키는 귀하의 컴퓨터에 텍스트 파일로 저장되는 데이터 조각입니다.
웹 서버가 웹 페이지를 브라우저에 보낼 때 연결이 종료된 후에는 서버에서 사용자 정보를 기록하지 않습니다.
쿠키의 역할은 "클라이언트에서 사용자 정보를 기록하는 방법"을 해결하는 것입니다.
사용자가 웹 페이지를 방문하면 해당 사용자의 이름이 쿠키에 기록될 수 있습니다.
다음번에 사용자가 이 페이지를 방문할 때 쿠키에 있는 사용자 액세스 기록을 읽을 수 있습니다.
쿠키는 아래와 같이 이름/값 쌍으로 저장됩니다.
username=John Doe
브라우저가 서버에 웹페이지를 요청하면 해당 페이지에 속한 쿠키가 요청에 추가됩니다. 서버는 이러한 방식으로 사용자 정보를 얻습니다.
JavaScript를 사용하여 쿠키 만들기
JavaScript는 document.cookie 속성을 사용하여 쿠키를 만들고 읽고 삭제할 수 있습니다.
JavaScript에서 다음과 같이 쿠키를 만듭니다.
document.cookie="username=John Doe";
쿠키에 만료 시간(UTC 또는 GMT 시간)을 추가할 수도 있습니다. 기본적으로 쿠키는 브라우저가 닫히면 삭제됩니다.
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
path 매개변수를 사용하여 브라우저에 쿠키 경로를 알릴 수 있습니다. 기본적으로 쿠키는 현재 페이지에 속합니다.
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
JavaScript를 사용하여 쿠키 읽기
JavaScript에서는 다음 코드를 사용하여 쿠키를 읽을 수 있습니다.
var x = document.cookie;
document.cookie는 문자열 형식으로 모든 쿠키를 반환합니다. 형식: cookie1=value ; cookie2=value; cookie3=value;
JavaScript를 사용하여 쿠키 수정
JavaScript에서 쿠키 수정은 다음과 같이 쿠키 생성과 유사합니다.
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
오래된 쿠키를 덮어씁니다.
JavaScript를 사용하여 쿠키 삭제
쿠키 삭제는 매우 쉽습니다. 아래와 같이 만료 매개변수를 이전 시간으로 설정하기만 하면 됩니다. Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
삭제할 때 쿠키 값을 지정할 필요가 없습니다. 그것.
쿠키 문자열
document.cookie 속성은 일반 텍스트 문자열처럼 보이지만 그렇지 않습니다.
document.cookie에 완전한 쿠키 문자열을 작성하더라도 쿠키 정보를 다시 읽으면 쿠키 정보가 이름/값 쌍의 형태로 표시됩니다.
새 쿠키를 설정해도 기존 쿠키는 덮어쓰이지 않습니다. 새로운 쿠키는 document.cookie에 추가되므로 document.cookie를 다시 읽으면 다음과 같은 데이터를 얻게 됩니다:
cookie1=value; cookie2=value;
모든 쿠키 표시 쿠키 생성 1 쿠키 생성 2 쿠키 삭제 1 쿠키 삭제 2
특정 쿠키 값을 찾으려면 쿠키 문자열에서 쿠키 값을 찾는 JavaScript 함수를 만들어야 합니다.
JavaScript 쿠키 예제
다음 예제에서는 방문자 이름을 저장하는 쿠키를 생성하겠습니다.
먼저 방문자가 웹페이지를 방문하면 이름을 입력하라는 메시지가 표시됩니다. 이 이름은 쿠키에 저장됩니다.
다음에 방문자가 페이지를 방문하면 환영 메시지가 표시됩니다.
이 예에서는 3개의 JavaScript 함수를 만듭니다.
쿠키 값을 설정하는 함수
쿠키 값을 가져오는 함수
쿠키 값을 감지하는 함수
쿠키 값을 설정하는 함수
먼저 다음 작업에 사용되는 함수를 만듭니다. 방문자 이름 저장:
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;}기능 분석:
위 함수 매개변수 중 쿠키 이름은 cname, 쿠키 값은 cvalue, 쿠키 만료 시간이 설정됩니다.
이 함수는 쿠키 이름, 쿠키 값, 쿠키 만료 시간을 설정합니다.
쿠키 값을 가져오는 함수
그런 다음 지정된 쿠키의 값을 반환하는 사용자 함수를 만듭니다.
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";}함수 분석:
쿠키 이름의 매개 변수는 cname입니다.
지정된 쿠키를 검색하기 위한 텍스트 변수를 만듭니다: cname + "=".
세미콜론을 사용하여 document.cookie 문자열을 분할하고 분할 문자열 배열을 ca(ca = document.cookie.split(';'))에 할당합니다.
ca 배열(i=0;i 쿠키가 발견되면(c.indexOf(name) == 0) 쿠키 값(c.substring(name.length,c.length)을 반환합니다. 쿠키가 발견되지 않으면 ""를 반환합니다. 쿠키 값 감지 기능 마지막으로 쿠키 생성 여부를 감지하는 기능을 만들 수 있습니다. 쿠키가 설정되면 인사말 메시지가 표시됩니다. 쿠키가 설정되지 않으면 팝업이 표시됩니다. 방문자 이름을 묻는 창이 표시되고, setCookie 함수를 호출하여 방문자 이름을 365일 동안 저장합니다. 전체 예시 예 本篇对相关cookie的相关知识做出了一些了解，更多的学习资料清关注php中文网即可观看。 相关推荐： JavaScript typeof, null, 和 undefined的相关知识 위 내용은 JavaScript 쿠키 이해 및 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!function checkCookie(){
var username=getCookie("username");
if (username!="")
{
alert("Welcome again " + username);
}
else
{
username = prompt("Please enter your name:","");
if (username!="" && username!=null)
{
setCookie("username",username,365);
}
}}function setCookie(cname,cvalue,exdays){
var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname+"="+cvalue+"; "+expires;}function getCookie(cname){
var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) {
var c = ca[i].trim(); if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";}function checkCookie(){
var user=getCookie("username"); if (user!=""){
alert("欢迎 " + user + " 再次访问"); }
else {
user = prompt("请输入你的名字:",""); if (user!="" && user!=null){
setCookie("username",user,30); }
}}
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
