자바스크립트에서 쿠키 작업을 구현하는 방법-JS 튜토리얼-php.cn

자바스크립트에서 쿠키 작업을 구현하는 방법

青灯夜游

풀어 주다： 2023-01-11 09:20:25

원래의

16901명이 탐색했습니다.

방법: 1. "document.cookie="name=value;"" 문을 사용하여 쿠키를 설정하거나 쿠키 값을 수정합니다. 2. "document.cookie" 문을 사용하여 쿠키 값을 얻습니다. 유효 시간을 "만료"로 설정하여 쿠키를 삭제하는 만료 값으로 설정합니다.

자바스크립트에서 쿠키 작업을 구현하는 방법

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

쿠키는 방문자의 컴퓨터에 저장되는 변수로, 이용자가 웹사이트를 방문할 때 쿠키를 통해 방문자의 컴퓨터에 데이터가 저장될 수 있습니다. 이후, 이용자가 동일한 컴퓨터의 브라우저를 통해 해당 페이지를 다시 요청하는 경우, 이 쿠키가 전송되며, 이 쿠키를 통해 이용자를 식별할 수 있습니다.

1. 쿠키 설정

쿠키를 사용하여 데이터를 저장하려면 쿠키를 설정해야 합니다. 각 쿠키는 이름/값 쌍입니다. 이름/값 쌍은 등호로 연결되며 이름/값 쌍은 document.cookie에 할당됩니다. 여러 이름/값 쌍을 document.cookie에 한 번에 할당할 수 있으며 세미콜론과 공백을 사용하여 각 이름/값 쌍을 구분합니다.

쿠키 설정의 기본 형식은 다음과 같습니다.

document.cookie = "名称1=值1[; 名称2=值2; …]";

로그인 후 복사

쿠키 설정 예는 다음과 같습니다.

document.cookie = "username=abc";
document.cookie = "age=23";
document.cookie = "username=abc; age=23";

로그인 후 복사

주의할 점은 쿠키의 이름이나 값에는 세미콜론, 등호 = 및 기타 기호를 사용할 수 없다는 점입니다. 쿠키. 이러한 기호를 저장하려면 인코딩을 위해 escape() 함수를 사용해야 합니다. 예: document.cookie="str="+escape("username=nch"), 이 코드는 document.cookie="str=username%3Dnch"와 동일합니다. 즉, 등호는 %3D로 인코딩됩니다. . escape() 인코딩을 사용하는 경우 원래의 쿠키 값을 얻으려면 값을 빼낸 후 unescape()를 사용하여 디코딩해야 합니다.

또한, 위 형식을 사용하여 설정된 쿠키의 값이 사용자의 컴퓨터에 저장되면, 서로 다른 웹사이트의 데이터는 웹사이트 도메인 이름의 형태로 구분되며, 브라우저마다 쿠키를 서로 다른 위치에 저장하므로 브라우저마다 다릅니다. store 쿠키는 상호 접근이 불가능합니다. 또한, 동일한 도메인 이름에 저장되는 쿠키 수에는 제한이 있으며, 브라우저마다 저장되는 쿠키 수에 대한 제한이 다릅니다. 또한, 각 쿠키에 저장되는 콘텐츠의 크기도 제한되어 있으며, 브라우저마다 크기 제한이 다릅니다.

2. 쿠키 값 수정

쿠키 값을 변경하려면 다시 할당하세요. 예: document.cookie="age=36"; 이렇게 하면 이전 설정 쿠키 값은 age=23입니다. document.cookie="age=36";这样就可以修改前面设置的 age=23 的 cookie 值。

3. 获取cookie

通过 document.cookie

3. 쿠키 가져오기

현재 웹사이트에서 쿠키를 가져오기 위해 document.cookie를 사용하면 아래의 모든 쿠키가 포함된 문자열 형식의 값을 얻게 됩니다. 현재 웹사이트. 세미콜론 + 공백을 통해 모든 쿠키를 연결합니다.

다른 쿠키 값을 얻으려면 분할() 메서드를 사용하여 세미콜론과 공백이 포함된 문자열을 세미콜론으로 구분된 문자열 배열로 변환한 다음 문자열 배열을 순회하여 각 이름/값 쌍을 얻을 수 있습니다. ) 메서드를 다시 사용하여 이 이름/값 쌍을 등호로 구분된 이름과 값을 포함하는 배열로 변환하면 지정된 쿠키 이름의 값을 얻을 수 있습니다.

예를 들어 age라는 쿠키의 값을 가져오는 코드는 다음과 같습니다.

document.cookie = "username=abc; age=23";
var arr1 = document.cookie.split(&#39;;&#39;);
for(var i = 0; i < arr1.length; i++){
     var arr2 = arr1[i].split(&#39;=&#39;);
     if(arr2[0] == &#39;age&#39;){
         alert(arr2[1]);
     }
}

로그인 후 복사

4. 쿠키의 유효 시간을 설정합니다

기본적으로 쿠키는 임시로 저장됩니다. 기본적으로 메모리에 저장되며 하드 드라이브에 저장되지 않으므로 저장된 쿠키는 브라우저 프로세스가 닫힌 후 자동으로 삭제됩니다. 쿠키를 일정 기간 또는 영구적으로 컴퓨터에 저장하려면 쿠키 설정 시 유효한 시간을 설정해야 합니다. 설정 형식은 다음과 같습니다.

document.cookie = "名称=值;expires="+字符串格式的时间;

로그인 후 복사

예:

var oDate = new Date();
oDate.setDate(oDate.getDate()+10);//访问页面后的10天过期
//设置cookie的有效时间，时间为字符串格式
document.cookie = &#39;username=abc;expires=&#39;+oDate.toGMTString();

로그인 후 복사

쿠키 직접 삭제 유효 시간은 과거의 특정 시간으로 설정할 수 있습니다. 예:

var oDate = new Date();
oDate.setDate(oDate.getDate()-1);//访问页面的前一天
document.cookie = &#39;username=abc;expires=&#39;+oDate.toGMTString();

로그인 후 복사

[예시 1] 문서를 사용하여 쿠키를 운영합니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用cookie记住登录用户名</title>
<script>
     window.onload = function(){
         var oUsername = document.getElementById(&#39;username&#39;);
         var oLogin = document.getElementById(&#39;login&#39;);
         var oDel = document.getElementById(&#39;del&#39;);
         //判断用户是否曾经登录过
         if(getCookie(&#39;username&#39;)){
              oUsername.value = getCookie(&#39;username&#39;);
         }
         //定义一个函数来获取指定名称的cookie值：
         function getCookie(key){
              var arr1 = document.cookie.split(&#39;;&#39;);
              for(var i = 0; i < arr1.length; i++){
                  var arr2 = arr1[i].split(&#39;=&#39;);
                  if(arr2[0] == key){
                       return unescape(arr2[1]);//对编码后的内容进行解码
                  }           
              }
         }    
         //定义一个函数来设置cookie,同时设置cookie的有效时间
         function setCookie(key,value,t){
              var oDate = new Date();
              oDate.setDate(oDate.getDate()+t);
              //使用escape()对内容进行编码
              document.cookie = key+&#39;=&#39;+escape(value)+&#39;;expires=&#39;+oDate.toGMTString();         
         }    
         //定义一个函数移除cookie
         function removeCookie(key){
              setCookie(key,&#39;&#39;,-1);
         }
         oLogin.onclick = function(){
              alert(&#39;登录成功&#39;);
              //将输入的用户名存储在cookie中，且在登录5天后cookie过期
              setCookie(&#39;username&#39;,oUsername.value,5);
         }
         oDel.onclick = function(){
              removeCookie(&#39;username&#39;);
              oUsername.value = &#39;&#39;;//移除cookie后清空文本框内容
         }
     };
</script>
</head>
<body>
     <input type="text" id="username"/>
     <input type="button" value="登录" id="login"/>
     <input type="button" value="删除用户名cookie" id="del"/>
</body>
</html>

로그인 후 복사

참고: Firefox와 IE는 로컬에서만 임시 쿠키 작동을 허용하며, 브라우저를 닫은 후에는 쿠키를 얻을 수 없습니다. 반면에 Chrome은 쿠키의 로컬 조작을 허용하지 않습니다. 예제 1이 웹 서버에 게시된 후 액세스되면 이러한 브라우저는 쿠키를 조작할 수 있습니다.
아래 그림은 Chrome 브라우저에서 Tomcat 웹 서버에 접속하여 게시한 후 사용자 이름을 입력한 후 로그인 버튼과 삭제 버튼을 누른 결과입니다(Tomcat 서버가 이 컴퓨터에 있으므로 localhost를 호스트로 사용하면 됩니다). 도메인 이름)에 액세스합니다).

자바스크립트에서 쿠키 작업을 구현하는 방법

🎜🎜🎜🎜사용자 이름을 입력한 후 로그인 버튼을 클릭하고 Chrome 브라우저 프로세스를 닫은 후 사용자 이름 쿠키 삭제 버튼을 클릭한 다음 Chrome을 다시 열어 예제 1에 액세스하면 그림과 같은 결과를 얻을 수 있습니다. 3 즉, 사용자 이름이 텍스트 상자에 자동으로 표시됩니다. 사용자 이름 쿠키 삭제 버튼을 클릭하고 크롬 브라우저 프로세스를 종료한 후 다시 크롬을 열어 예시 1에 접속하면 그림 4와 같은 결과를 얻게 됩니다. 이때 쿠키에 저장된 사용자 이름은 삭제되어 접속할 수 없습니다. 텍스트 상자가 표시됩니다. 🎜

【추천 학습: javascript 고급 튜토리얼】

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