> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트에서 쿠키를 삭제하는 방법

자바스크립트에서 쿠키를 삭제하는 방법

青灯夜游
풀어 주다: 2021-06-17 14:31:56
원래의
11180명이 탐색했습니다.

Clear 방법: 쿠키 값을 지정하지 않고 만료 매개변수를 과거 날짜로 설정하면 됩니다. 구문은 "document.cookie="username=;expires=Thu,01 Jan 1970 00:00:00 UTC;path=입니다. /;" ;".

자바스크립트에서 쿠키를 삭제하는 방법

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

쿠키는 웹 애플리케이션이 사용자에 대한 정보를 저장하는 유용한 방법을 제공합니다. 예를 들어, 사용자가 당사 사이트를 방문할 때 쿠키를 사용하여 사용자 기본 설정이나 기타 정보를 저장하면 다음 번에 사용자가 당사 사이트를 방문할 때 애플리케이션이 이전에 저장된 정보를 검색할 수 있습니다.

쿠키란 도대체 무엇입니까

쿠키는 사용자 요청 및 페이지와 함께 웹 서버와 브라우저 간에 전달되는 작은 텍스트 정보입니다. 쿠키에 포함된 정보는 사용자가 사이트를 방문할 때마다 웹 애플리케이션에서 읽을 수 있습니다.

쿠키는 사용자의 정보 저장 문제를 해결하기 위해 등장합니다. 예를 들어

사용자가 웹페이지를 방문할 때 사용자의 이름이 쿠키에 저장될 수 있습니다.

다음에 사용자가 페이지를 방문할 때 쿠키는 사용자 이름을 기억합니다.

쿠키는 모든 웹페이지의 사용자 정보를 기억할 수 있습니다. 문자열 형식의 정보를 포함하며 키-값 쌍 형식, 즉 키=값 형식으로 저장됩니다. 각 쿠키는 일반적으로 ";"로 구분됩니다.

사용자 이름 = Daisy Greenusername = Daisy Green

Cookie 的组成

Cookie 在HTTP的头部Header信息中,HTTP Set-Cookie的Header格式如下:

Set-Cookie: name=value; [expires=date]; [path=path];
[domain=domainname]; [secure];
로그인 후 복사

在HTTP代码中一个具体的例子:

<meta http-equiv="set-cookie" content=" cookieName = cookieValue;expires=01-Dec-2006 01:14:26 GMT; path=/" />
로그인 후 복사

从上面的格式可以看出,Cookie由下面几部分组成。

Name/Value对

Name/Value由分号分隔,一个Cookie最多有20对,每个网页最多有一个Cookie,Value的长度不超过4K。对于Value值,最好用encodeURIComponent对其编码。

JS Cookie

在JS中,可以使用Document对象的cookie属性操作cookie。 JS 可以读取,创建,修改和删除当前网页的cookie,,来看看具体的骚操作。

创建 Cookie

JS可以使用document.cookie属性创建cookie,可以通过以下方式创建cookie:

document.cookie = "username=Daisy Green";
로그인 후 복사

还可以添加有效日期(UTC 时间)。默认情况下,在浏览器关闭时会删除 cookie:

document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC";
通过 path 参数,可以告诉浏览器 cookie 属于什么路径。默认情况下,cookie 属于当前页。

document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC"; path=/";
로그인 후 복사

读取 Cookie

通过 JS,可以这样读取 cookie:

var x = document.cookie;
로그인 후 복사

<span style="font-family: "Microsoft Yahei", "Hiragino Sans GB", Helvetica, "Helvetica Neue", 微软雅黑, Tahoma, Arial, sans-serif;">document.cookie 会在一条字符串中返回所有 cookie,比如:cookie1=value; cookie2</span><br/>

事例:

<html>
  <head>  
   <script type = "text/javascript">
     <!--
      function ReadCookie() {
        var allcookies = document.cookie;
        document.write ("All Cookies : " + allcookies );
        
        // Get all the cookies pairs in an array
        cookiearray = allcookies.split(&#39;;&#39;);
        
        // Now take key value pair out of this array
        for(var i=0; i<cookiearray.length; i++) {
         name = cookiearray[i].split(&#39;=&#39;)[0];
         value = cookiearray[i].split(&#39;=&#39;)[1];
         document.write ("Key is : " + name + " and Value is : " + value);
        }
      }
     //-->
   </script>   
  </head>
  
  <body>   
   <form name = "myform" action = "">
     <p> click the Button to View Result:</p>
     <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
   </form>   
  </body>
</html>
로그인 후 복사

运行:

자바스크립트에서 쿠키를 삭제하는 방법

改变 cookie

通过使用 JS,咱们可以像创建 cookie 一样改变它:

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
로그인 후 복사

这样旧 cookie 会被覆盖。

事例:

<html>
  <head>  
   <script type = "text/javascript">
     <!--
      function WriteCookie() {
        var now = new Date();
        now.setMonth( now.getMonth() + 1 );
        cookievalue = escape(document.myform.customer.value) + ";"
        
        document.cookie = "name=" + cookievalue;
        document.cookie = "expires=" + now.toUTCString() + ";"
        document.write ("Setting Cookies : " + "name=" + cookievalue );
      }
     //-->
   </script>   
  </head>
  
  <body>
   <form name = "myform" action = "">
     Enter name: <input type = "text" name = "customer"/>
     <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
   </form>   
  </body>
</html>
로그인 후 복사

运行:

자바스크립트에서 쿠키를 삭제하는 방법

删除 cookie

删除 cookie 非常简单,不必指定 cookie 值:直接把 expires 参数设置为过去的日期即可:

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

Cookie 구성

Cookie HTTP 헤더 정보 중 HTTP Set-Cookie의 헤더 형식은 다음과 같습니다.

<html>
  <head>  
   <script type = "text/javascript">
     <!--
      function WriteCookie() {
        var now = new Date();
        now.setMonth( now.getMonth() - 1 );
        cookievalue = escape(document.myform.customer.value) + ";"
        
        document.cookie = "name=" + cookievalue;
        document.cookie = "expires=" + now.toUTCString() + ";"
        document.write("Setting Cookies : " + "name=" + cookievalue );
      }
     //-->
   </script>   
  </head>
  
  <body>
   <form name = "myform" action = "">
     Enter name: <input type = "text" name = "customer"/>
     <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
   </form>   
  </body>
</html>
로그인 후 복사
🎜HTTP 코드에서 구체적인 예: 🎜🎜rrreee🎜위의 형식에서 볼 수 있듯이 쿠키는 다음과 같은 부분으로 구성됩니다. 🎜🎜🎜이름/값 쌍🎜🎜이름/값은 세미콜론으로 구분됩니다. 쿠키는 최대 20개 쌍을 가질 수 있습니다. 각 웹 페이지는 최대 하나의 쿠키를 가질 수 있습니다. 값의 길이는 4K를 초과하지 않습니다. 값 값의 경우 encodeURIComponent를 사용하여 인코딩하는 것이 가장 좋습니다. 🎜🎜🎜🎜JS Cookie🎜🎜🎜🎜🎜JS에서는 Document 개체의 cookie 속성을 사용하여 쿠키를 조작할 수 있습니다. JS는 현재 웹페이지의 쿠키를 읽고, 생성하고, 수정하고, 삭제할 수 있습니다. 구체적인 작업을 살펴보겠습니다. 🎜🎜🎜쿠키 만들기🎜🎜🎜🎜JS는 document.cookie 속성을 사용하여 쿠키를 만들 수 있습니다. 🎜rrreee🎜유효한 날짜(UTC 시간)를 추가할 수도 있습니다. 기본적으로 쿠키는 브라우저가 닫히면 삭제됩니다. 🎜🎜🎜document.cookie = "username=Daisy Green; 만료=Mon, 26 Aug 2019 12:00:00 UTC";🎜path 매개변수를 통해 브라우저에 알릴 수 있습니다. 쿠키가 속한 경로는 무엇입니까? 기본적으로 쿠키는 현재 페이지에 속합니다. 🎜rrreee🎜🎜쿠키 읽기🎜🎜🎜🎜JS를 통해 다음과 같은 쿠키를 읽을 수 있습니다: 🎜rrreee🎜<span style="font-family: " microsoft yahei sans gb helvetica neue>…é»', Tahoma, Arial, sans-serif;">document.cookie는 다음과 같은 문자열로 모든 쿠키를 반환합니다. cookie1=value cookie2🎜🎜</span> 🎜 🎜예: 🎜rrreee🎜실행: 🎜

🎜자바스크립트에서 쿠키를 삭제하는 방법🎜🎜🎜🎜쿠키 변경🎜🎜🎜JS를 사용하면 쿠키를 만드는 것처럼 쿠키를 변경할 수 있습니다.🎜rrreee🎜이렇게 하면 이전 쿠키가 덮어쓰여집니다. 🎜🎜예: 🎜rrreee🎜실행: 🎜🎜 자바스크립트에서 쿠키를 삭제하는 방법🎜🎜🎜쿠키 삭제🎜🎜🎜🎜쿠키 삭제는 매우 간단합니다. 쿠키 값을 지정할 필요가 없습니다. 만료 매개변수를 과거 날짜로 설정하기만 하면 됩니다: 🎜🎜document.cookie = "username=; 만료=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";🎜🎜🎜올바른 쿠키가 삭제되도록 하려면 쿠키 경로를 정의해야 합니다. 경로가 지정되지 않으면 일부 브라우저에서는 쿠키 삭제를 허용하지 않습니다. 🎜🎜예: 🎜rrreee🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

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

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