JavaScript ですべての Cookie をクリアする

Shiv Yadav 2023年10月12日
JavaScript ですべての Cookie をクリアする

この記事は、JavaScript を使用してすべての Cookie をクリアするのに役立ちます。

Cookie を使用すると、クライアントとサーバーは HTTP を介して情報を通信および転送できます。これにより、クライアントはステートレスプロトコル HTTP を使用している場合でも状態情報を保持できます。

  1. Cookie に関する情報は、ユーザーのブラウザからドメインにアクセスするたびに、HTTP リクエストヘッダーで送信されます。
  2. ログイン情報、同意、その他のパラメーターなどの情報は、ユーザーエクスペリエンスを向上させ、パーソナライズします。

現在のドキュメントの cookie 属性は、HTML DOM cookie 属性を使用して購入した cookie の属性を変更するために使用されます。document.cookie は、現在のドキュメントに関連付けられているすべてのセミコロン区切りの Cookie の文字列を返します。

構文:

document.cookie = 'key=value';

以下のコードは、JavaScript を使用して Cookie を削除する方法を示しています。コードはオンラインエディタで実行され、サイトで生成された Cookie のみを削除できることを示しています。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>
      </title>
   </head>
   <body>
      <main>
         <script type="text/javascript">
            document.cookie = "username=shiv";
            document.cookie = "CONSENT=YES+IN.en+20170903-09-0";
            
            function displayCookies() {
            
            	var displayCookies = document.getElementById("display");
            	displayCookies.innerHTML = document.cookie;
            }
            
            function deleteAllCookies() {
             var cookies = document.cookie.split(";");
             for (var i = 0; i < cookies.length; i++) {
                 var cookie = cookies[i];
                 var eqPos = cookie.indexOf("=");
                 var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
                 document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
             }
            }
         </script>
         <button onclick="displayCookies()">Display Cookies</button>
         <button onclick="deleteAllCookies()">Delete Cookies</button>
         <p id="display"></p>
      </main>
   </body>
</html>				

上記のコードには 2つの制限があります。

  1. HttpOnly フラグが設定された Cookie は削除されません。これは、HttpOnly フラグが Cookie への JavaScript アクセスを無効にするためです。
  2. パス値として設定された Cookie は削除されません。(これらの Cookie は[削除済み]の下に表示されますが、インストールパスに同じ値を指定しないと削除できません。)

出力:

Cookie の表示をクリックすると、Cookie が表示されます。

javascript クリア Cookie-Cookie1

インスペクターで Cookie を表示することもできます。

javascript クリア Cookie-Cookie2

Cookie の削除をクリックすると削除されます。Cookie の表示をもう一度クリックして、削除されているかどうかを確認する必要があります。

javascript クリア Cookie-Cookie3

削除されているかどうかもインスペクターで確認できます。

javascript クリアクッキー-クッキー4

著者: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

関連記事 - JavaScript Cookies