首頁 web前端 js教程 javascript怎麼清除cookie

javascript怎麼清除cookie

Jun 17, 2021 pm 02:31 PM
javascript 清除cookie

清除方法:不指定cookie值,把expires參數設定為過去的日期即可,語法「document.cookie="username=;expires=Thu,01 Jan 1970 00:00:00 UTC;path =/;";」。

javascript怎麼清除cookie

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

Cookie 為 Web 應用程式保存使用者相關資訊提供了一個有用的方法。例如,當使用者造訪咱們的網站時,可以利用 Cookie 來儲存使用者首選項或其他信息,這樣,當使用者下次再造訪咱們的網站時,應用程式就可以檢索先前儲存的資訊。

Cookie 是什麼鬼

#Cookie 是一小段文字訊息,伴隨著使用者請求和頁面在Web 伺服器和瀏覽器之間傳遞。當使用者每次造訪網站時,Web 應用程式都可以讀取 Cookie 包含的資訊。

Cookie的出現是為了解決保存使用者資訊的問題。例如

當使用者造訪網頁時,使用者的名字可以儲存在cookie中。

下次使用者造訪頁面時,cookie會記住使用者名稱。

Cookie 能在所有網頁中記住使用者的資訊。它以字串的形式包含訊息,並鍵值對的形式保存的,即key=value的格式。各個cookie之間一般是以「;」分隔。

username = Daisy Green

Cookie 的組成

##Cookie 在HTTP的頭部Header資訊中,HTTP Set-Cookie的Header格式如下:

Set-Cookie: name=value; [expires=date]; [path=path];
[domain=domainname]; [secure];
登入後複製

在HTTP程式碼中一個具體的例子:

<br/>

<meta http-equiv="set-cookie" content=" cookieName = cookieValue;expires=01-Dec-2006 01:14:26 GMT; path=/" />
登入後複製

從上面的格式可以看出,Cookie由下面幾部分組成。

<br/>

Name/Value對

Name/Value由分號分隔,一個Cookie最多有20對,每個網頁最多有一個Cookie,Value的長度不超過4K。對於Value值,最好用encodeURIComponent對其編碼。

JS Cookie<br/>

在JS中,可以使用Document物件的cookie屬性來操作cookie。 JS 可以讀取,創建,修改和刪除目前網頁的cookie,,來看看具體的騷操作。

建立Cookie<br/>

JS可以使用document.cookie屬性建立cookie,可以透過以下方式建立cookie:

document.cookie = "username=Daisy Green";
登入後複製

也可以添加有效日期(UTC 時間)。預設情況下,在瀏覽器關閉時會刪除cookie:

<br/>

document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC";

透過path 參數,可以告訴瀏覽器cookie 屬於什麼路徑。預設情況下,cookie 屬於目前頁。 <br/>

document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC"; path=/";
登入後複製

讀取Cookie<br/>

透過JS,可以這樣讀取cookie:

var x = document.cookie;
登入後複製

document.cookie會在一條字串中傳回所有cookie,例如:cookie1=value; cookie2<span style="font-family: "Microsoft Yahei", "Hiragino Sans GB", Helvetica, "Helvetica Neue", 微软雅黑, Tahoma, Arial, sans-serif;"></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>
登入後複製

執行:

javascript怎麼清除cookie

javascript怎麼清除cookie

<br/>

<br/>

##################### #################改變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=/;";############應該定義cookie 路徑以確保刪除正確的cookie。如果不指定路徑,有些瀏覽器不會讓咱們刪除 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>
登入後複製
###更多程式相關知識,請造訪:###程式設計影片###! ! ###

以上是javascript怎麼清除cookie的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

簡易JavaScript教學:取得HTTP狀態碼的方法

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript與WebSocket:打造高效率的即時天氣預報系統

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

如何在JavaScript中取得HTTP狀態碼的簡單方法

javascript如何使用insertBefore javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

javascript如何使用insertBefore

See all articles