> 웹 프론트엔드 > JS 튜토리얼 > js의 쿠키 읽기 및 쓰기 작업 예제에 대한 자세한 설명

js의 쿠키 읽기 및 쓰기 작업 예제에 대한 자세한 설명

PHPz
풀어 주다: 2018-09-29 14:54:33
앞으로
1178명이 탐색했습니다.

쿠키에는 유효 기간이 있습니다. 쿠키의 기본 유효 기간은 쿠키가 생성된 시점부터 브라우저를 닫을 때까지입니다. 쿠키의 유효 기간을 설정하여 만료 날짜를 지정할 수도 있습니다. 쿠키 또는 수동으로 쿠키 삭제

쿠키는 컴퓨터의 하드 드라이브에 저장되는 일련의 키/값 쌍인 작은 정보 조각입니다. 쿠키의 저장 용량은 브라우저 제조업체마다 약간 다릅니다. 쿠키 크기 제한, 쿠키의 주요 본질은 이를 식별하여 작업을 수행하는 "식별"입니다. 쿠키는 귀하의 하드 드라이브에서 다른 데이터를 얻거나 컴퓨터 바이러스를 전송하거나 귀하의 이메일 주소를 얻을 수 없습니다. 쿠키에는 유효 기간이 있습니다. 쿠키의 기본 유효 기간은 쿠키가 생성된 시점부터 브라우저를 닫을 때까지입니다. 또한 쿠키의 유효 기간을 설정하여 만료 날짜를 지정할 수도 있고, 사용자가 쿠키를 비활성화할 수도 있습니다. 쿠키를 삭제하세요.

쿠키는 특정 형식의 문자열과 텍스트 문자열입니다.

형식:

cookieName=cookieValue;expires=expiresDate;
path=URLpath;
domain=siteDomain
//cookie名称,失效日期,储存URL,储存域值;
로그인 후 복사

쿠키 생성 방법

우리는 일반적으로 쿠키 설정을 함수로 캡슐화합니다.

function addCookie(sName,sValue,day) { 
var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()+day);; 
//设置失效时间 
document.cookie = escape(sName) + '=' + escape(sValue) +';expires=' + expireDate.toGMTString();6 //escape()汉字转成unicode编码,toGMTString() 把日期对象转成字符串 
}
로그인 후 복사

쿠키 읽기

쿠키를 추가한 후 어떻게 얻나요? 간단함:

function getCookies() { 
var showAllCookie = ''; 
if(!document.cookie == ''){ 
var arrCookie = document.cookie.split('; '); 
//用spilt('; ')切割所有cookie保存在数组arrCookie中 
var arrLength = arrCookie.length; 
for(var i=0; i<arrLength; i++) { 
showAllCookie += &#39;c_name:&#39; + unescape(arrCookie[i].split(&#39;=&#39;)[0]) + &#39;c_value:&#39; + unescape(arrCookie[i].split(&#39;=&#39;)[1]) + &#39;<br>&#39; 9 } 
return showAllCookie; 
} 
}
로그인 후 복사

쿠키에는 유효 기간이 있으며 자동으로 삭제되거나 만료 날짜를 설정하여 즉시 삭제할 수 있습니다.

또한 매우 간단합니다. 계속하세요. :

function removeCookie() { 
if(document.cookie != &#39;&#39; && confirm(&#39;你想清理所有cookie吗?&#39;)) { 
var arrCookie = document.cookie.split(&#39;; &#39;); 
var arrLength = arrCookie.length; 
var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()-1); 
for(var i=0; i<arrLength; i++) { 
var str = arrCookie[i].split(&#39;=&#39;)[0]; 
document.cookie = str+ &#39;=&#39; + &#39;;expires=&#39; + expireDate.toGMTString(); 
} 
} 
}
로그인 후 복사

우리는 이미 쿠키를 생성하고 획득하고 삭제하는 방법을 알고 있으므로 이제 쿠키를 사용할 차례입니다.

쿠키를 사용하여 간단한 타이머를 만들어 보겠습니다.

var cookieCount = {}; 
cookieCount.count = function () { 
var count = parseInt(this.getCount(&#39;myCount&#39;)); 
count++; 
document.cookie = &#39;myCount=&#39; + count + &#39;&#39;; 
alert(&#39;第&#39;+count+&#39;访问&#39;); 
} 
cookieCount.setCount= function () { 
//首先得创建一个名为myCount的cookie 
var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()+1); 
document.cookie = &#39;myCount=&#39; + &#39;0&#39; +&#39;;expires=&#39; + expireDate.toGMTString(); 
} 
cookieCount.getCount = function (countName) { 
//获取名为计数cookie,为其加1 
var arrCookie = document.cookie.split(&#39;; &#39;); 
var arrLength = arrCookie.length; 
var ini = true; 
for(var i=0; i<arrLength; i++) { 
if(countName == arrCookie[i].split(&#39;=&#39;)[0]){ 
return parseInt(arrCookie[i].split(&#39;=&#39;)[1]); 
break; 
}else{ 
ini = false; 
} 
} 
if(ini == false)this.setCount(); 
return 0; 
} 
cookieCount.count();
로그인 후 복사

쿠키 경로

쿠키 경로는 이 글의 시작 부분에서 언급되었습니다. 쿠키 경로를 설정하세요: path=URL

쿠키가 생성된 경우 도메인 이름의 하위 디렉터리, 도메인 이름 및 기타 이 쿠키는 동일한 디렉터리 또는 상위 디렉터리에서 접근할 수 없습니다. 경로를 설정하면 도메인 이름과 도메인 이름의 하위 범주 디렉터리에 접근할 수 있다는 이점이 있습니다.

document.cookie=&#39;cookieName=cookieValue;expires=expireDate;path=/&#39;
로그인 후 복사

쿠키 도메인

도메인 설정: domain=siteDomain

주로 동일한 도메인에서 쿠키를 공유할 때 사용됩니다. "www.taobao.com" 및 "ued.taobao.com"과 같은 "두 사람은 "taobao.com"이라는 도메인 이름을 공유합니다. "www.taobao.com" 아래의 쿠키에 "ued"가 접근할 수 있도록 하려면 .taobao.com", 그런 다음 경로 속성을 "/"로 설정하고 쿠키의 도메인을 설정해야 합니다.->document.cookie='cookieName=cookieValue;expires=expireDate;path=/;domain=taobao .com'.

웹 프로젝트의 지속적인 개발에 따라 HTML5는 window.sessionStorage와 window.localStorage라는 두 가지 속성을 제공하고 setItem, getItem, RemoveItem, Clear 등의 메서드를 전달하여 데이터를 로컬에 저장할 수 있게 해줍니다. .작업이 더 간단하고 편리해졌습니다.

위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요.

관련 라벨:
원천:jb51.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿