jQuery로 쿠키를 어떻게 설정/해제합니까?

질문자 :omg

test 1 설정하는 것과 같이 jQuery를 사용하여 쿠키를 설정 및 설정 해제하려면 어떻게 해야 합니까?

2019년 4월 업데이트

쿠키 읽기/조작에는 jQuery가 필요하지 않으므로 아래의 원래 답변을 사용하지 마세요.

대신 https://github.com/js-cookie/js-cookie로 이동하여 jQuery에 의존하지 않는 라이브러리를 사용하세요.

기본 예:

 // Set a cookie Cookies.set('name', 'value'); // Read the cookie Cookies.get('name') => // => 'value'

자세한 내용은 github의 문서를 참조하세요.

---

2019년 4월 이전(구)

플러그인 참조:

https://github.com/carhartl/jquery-cookie

그런 다음 다음을 수행할 수 있습니다.

 $.cookie("test", 1);

지우는 것:

 $.removeCookie("test");

또한 쿠키에 특정 일 수(여기서는 10일)의 시간 초과를 설정하려면:

 $.cookie("test", 1, { expires : 10 });

만료 옵션을 생략하면 쿠키가 세션 쿠키가 되고 브라우저가 종료될 때 삭제됩니다.

모든 옵션을 포함하려면:

 $.cookie("test", 1, { expires : 10, // Expires in 10 days path : '/', // The value of the path attribute of the cookie // (Default: path of page that created the cookie). domain : 'jquery.com', // The value of the domain attribute of the cookie // (Default: domain of page that created the cookie). secure : true // If set to true the secure attribute of the cookie // will be set and the cookie transmission will // require a secure protocol (defaults to false). });

쿠키 값을 다시 읽으려면:

 var cookieValue = $.cookie("test");

쿠키가 현재 경로와 다른 경로에서 생성된 경우 경로 매개변수를 지정할 수 있습니다.

 var cookieValue = $.cookie("test", { path: '/foo' });

업데이트(2015년 4월):

아래 주석에서 언급했듯이 원래 플러그인을 작업한 팀은 동일한 기능과 일반 구문을 가진 새 프로젝트( https://github.com/js-cookie/js-cookie )에서 jQuery 종속성을 제거했습니다. 제이쿼리 버전. 분명히 원래 플러그인은 아무데도 가지 않습니다.

Alistair Evans

특히 쿠키를 조작하기 위해 jQuery를 사용할 필요가 없습니다.

QuirksMode에서 (이스케이프 문자 포함)

 function createCookie(name, value, days) { var expires; if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toGMTString(); } else { expires = ""; } document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/"; } function readCookie(name) { var nameEQ = encodeURIComponent(name) + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) === ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length)); } return null; } function eraseCookie(name) { createCookie(name, "", -1); }

보세요

• 기존 클래스 이름을 제거하고 jQuery와 쿠키를 사용하여 새 이름을 추가하려면 어떻게 합니까?

Russ Cam

<script type="text/javascript"> function setCookie(key, value, expiry) { var expires = new Date(); expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000)); document.cookie = key + '=' + value + ';expires=' + expires.toUTCString(); } function getCookie(key) { var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)'); return keyValue ? keyValue[2] : null; } function eraseCookie(key) { var keyValue = getCookie(key); setCookie(key, keyValue, '-1'); } </script>

쿠키를 다음과 같이 설정할 수 있습니다.

 setCookie('test','1','1'); //(key,value,expiry in days)

다음과 같이 쿠키를 얻을 수 있습니다.

 getCookie('test');

그리고 마지막으로 이와 같은 쿠키를 지울 수 있습니다.

 eraseCookie('test');

누군가에게 도움이되기를 바랍니다. :)

편집하다:

쿠키를 모든 경로/페이지/디렉토리로 설정하려면 경로 속성을 쿠키로 설정하십시오.

 function setCookie(key, value, expiry) { var expires = new Date(); expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000)); document.cookie = key + '=' + value + ';path=/' + ';expires=' + expires.toUTCString(); }

고마워, 빅키

Vignesh Pichamani

여기에서 사용할 수 있는 플러그인을 사용할 수 있습니다..

https://plugins.jquery.com/cookie/

그런 다음 쿠키를 작성하려면 $.cookie("test", 1);

설정된 쿠키에 액세스하려면 $.cookie("test");

user177016

다음은 내가 사용하는 전역 모듈입니다.

 var Cookie = { Create: function (name, value, days) { var expires = ""; if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toGMTString(); } document.cookie = name + "=" + value + expires + "; path=/"; }, Read: function (name) { var nameEQ = name + "="; var ca = document.cookie.split(";"); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == " ") c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; }, Erase: function (name) { Cookie.create(name, "", -1); } };

seanjacob

다음과 같은 행위를 하지 않도록 하십시오.

 var a = $.cookie("cart").split(",");

그런 다음 쿠키가 존재하지 않으면 디버거는 ".cookie not function"과 같은 도움이 되지 않는 메시지를 반환합니다.

항상 먼저 선언한 다음 null을 확인한 후 분할을 수행합니다. 이와 같이:

 var a = $.cookie("cart"); if (a != null) { var aa = a.split(",");

user890332

JavaScript로 쿠키를 설정하는 방법은 다음과 같습니다.

아래 코드는 https://www.w3schools.com/js/js_cookies.asp 에서 가져왔습니다.

 function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; }

이제 아래 기능으로 쿠키를 얻을 수 있습니다.

 function getCookie(cname) { var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for(var i = 0; i <ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; }

마지막으로 쿠키를 확인하는 방법은 다음과 같습니다.

 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); } } }

쿠키를 삭제하려면 만료 매개변수를 전달된 날짜로 설정하면 됩니다.

 document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

S1awek

브라우저에서 쿠키를 설정하는 간단한 예:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery.cookie Test Suite</title> <script src="jquery-1.9.0.min.js"></script> <script src="jquery.cookie.js"></script> <script src="JSON-js-master/json.js"></script> <script src="JSON-js-master/json_parse.js"></script> <script> $(function() { if ($.cookie('cookieStore')) { var data=JSON.parse($.cookie("cookieStore")); $('#name').text(data[0]); $('#address').text(data[1]); } $('#submit').on('click', function(){ var storeData = new Array(); storeData[0] = $('#inputName').val(); storeData[1] = $('#inputAddress').val(); $.cookie("cookieStore", JSON.stringify(storeData)); var data=JSON.parse($.cookie("cookieStore")); $('#name').text(data[0]); $('#address').text(data[1]); }); }); </script> </head> <body> <label for="inputName">Name</label> <br /> <input type="text" id="inputName"> <br /> <br /> <label for="inputAddress">Address</label> <br /> <input type="text" id="inputAddress"> <br /> <br /> <input type="submit" id="submit" value="Submit" /> <hr> <p id="name"></p> <br /> <p id="address"></p> <br /> <hr> </body> </html>

간단하게 복사/붙여넣기를 하고 이 코드를 사용하여 쿠키를 설정하십시오.

Webpixstudio

Mozilla 웹사이트의 라이브러리는 여기에서 사용할 수 있습니다.

다음과 같이 쿠키를 설정하고 얻을 수 있습니다.

 docCookies.setItem(name, value); docCookies.getItem(name);

Moustafa Samir

Fresher가 우리에게 좋은 방법을 제시했다고 생각하지만 실수가 있습니다.

 <script type="text/javascript"> function setCookie(key, value) { var expires = new Date(); expires.setTime(expires.getTime() + (value * 24 * 60 * 60 * 1000)); document.cookie = key + '=' + value + ';expires=' + expires.toUTCString(); } function getCookie(key) { var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)'); return keyValue ? keyValue[2] : null; } </script>

getTime() 근처에 "값"을 추가해야 합니다. 그렇지 않으면 쿠키가 즉시 만료됩니다. :)

barmyman

Vignesh Pichamani 의 답변이 가장 간단하고 깔끔하다고 생각했습니다. 만료 전 일 수를 설정하는 기능을 추가하기만 하면 됩니다.

편집: 날짜 번호가 설정되지 않은 경우 '만료되지 않음' 옵션도 추가됨

 function setCookie(key, value, days) { var expires = new Date(); if (days) { expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000)); document.cookie = key + '=' + value + ';expires=' + expires.toUTCString(); } else { document.cookie = key + '=' + value + ';expires=Fri, 30 Dec 9999 23:59:59 GMT;'; } } function getCookie(key) { var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)'); return keyValue ? keyValue[2] : null; }

쿠키 설정:

 setCookie('myData', 1, 30); // myData=1 for 30 days. setCookie('myData', 1); // myData=1 'forever' (until the year 9999)

Colin R. Turner

나는 많은 훌륭한 답변이 있다는 것을 알고 있습니다. 종종 쿠키를 읽기만 하면 되며 추가 라이브러리를 로드하거나 함수를 정의하여 오버헤드를 만들고 싶지 않습니다.

다음은 javascript의 한 줄에서 쿠키를 읽는 방법 입니다. Guilherme Rodrigues의 블로그 기사 에서 답을 찾았습니다.

 ('; '+document.cookie).split('; '+key+'=').pop().split(';').shift()

key 라는 이름의 쿠키를 읽습니다. nice, clean and simple.

Fabian

시도 ( 여기 문서, SO 스 니펫이 작동하지 않으므로 이것을 실행하십시오)

 document.cookie = "test=1" // set document.cookie = "test=1;max-age=0" // unset

Kamil Kiełczewski

다음 코드는 현재 도메인 내의 모든 쿠키와 모든 후행 하위 도메인( www.some.sub.domain.com , .some.sub.domain.com , .sub.domain.com 등)을 제거합니다.

한 줄 바닐라 JS 버전(jQuery가 필요 없음):

 document.cookie.replace(/(?<=^|;).+?(?=\=|;|$)/g, name => location.hostname.split('.').reverse().reduce(domain => (domain=domain.replace(/^\.?[^.]+/, ''),document.cookie=`${name}=;max-age=0;path=/;domain=${domain}`,domain), location.hostname));

다음은 이 한 줄의 읽을 수 있는 버전입니다.

 document.cookie.replace( /(?<=^|;).+?(?=\=|;|$)/g, name => location.hostname .split(/\.(?=[^\.]+\.)/) .reduceRight((acc, val, i, arr) => i ? arr[i]='.'+val+acc : (arr[i]='', arr), '') .map(domain => document.cookie=`${name}=;max-age=0;path=/;domain=${domain}`) );

Slavik Meltser

나는 이미 많은 답변이 있다는 것을 알고 있지만 여기에 모든 아름답게 바닐라를 set , get 및 delete 하고 전역 참조에 멋지게 넣은 답변이 있습니다.

 window.cookieMonster = window.cookieMonster || { // https://stackoverflow.com/a/25490531/1028230 get: function (cookieName) { var b = document.cookie.match('(^|;)\\s*' + cookieName + '\\s*=\\s*([^;]+)'); return b ? b.pop() : ''; }, delete: function (name) { document.cookie = '{0}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;' .replace('{0}', name); }, set: function (name, value) { document.cookie = '{0}={1};expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/;SameSite=Lax' .replace('{0}', name) .replace('{1}', value); } };

이 답변에서 다른 성의 질문에 대한 정규식을 가져오는 쿠키를 가져왔습니다.

---

테스트해 보겠습니다.

 cookieMonster.set('chocolate', 'yes please'); cookieMonster.set('sugar', 'that too'); console.log(cookieMonster.get('chocolate')); console.log(document.cookie); cookieMonster.delete('chocolate'); console.log(cookieMonster.get('chocolate')); console.log(document.cookie);

시도하기 전에 쿠키가 없다면 당신에게 주어야합니다 ...

 yes please chocolate=yes please; sugar=that too sugar=that too

쿠키는 우주의 죽음처럼 오래 지속되지는 않지만 본질적으로 우리의 관점에서 볼 때 지속된다는 점에 유의하십시오. 여기 또는 다른 답변에서 문자열을 보면 날짜를 매우 쉽게 변경하는 방법을 알 수 있습니다.

ruffin

$.cookie("test", 1); //set cookie $.cookie("test"); //get cookie $.cookie('test', null); //delete cookie

Hasan Badshah

출처 : http:www.stackoverflow.com/questions/1458724/how-do-i-set-unset-a-cookie-with-jquery