HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのcookieプロパティとは？Cookieの作成・読み取り・削除方法を解説

HTML DOM cookieプロパティとは

HTML DOMのcookieプロパティは、Cookieの作成・読み取り・削除を行うために使用されます。Cookieは、Webサイトがユーザー固有の情報を記録・追跡するために活用される仕組みです。

このプロパティの戻り値は文字列型で、すべてのCookieがセミコロン（;）区切りのリストとして返されます。個々のCookieは「key=value」という形式のペアで構成されています。なお、Cookieはブラウザを閉じるとすぐに削除されますが、有効期限を指定すれば一定期間保持することも可能です。

構文

cookieプロパティを設定する場合の構文は以下のとおりです。

document.cookie = newCookie;

ここでnewCookieは文字列型であり、セミコロン区切りの名前と値のペアのリストです。newCookieには、以下のオプション値を指定できます。

パラメータ説明
expires=dateCookieの有効期限をGMT形式の日付で指定します。デフォルトでは、ブラウザを閉じると同時にCookieは削除されます。
path=pathCookieを保存するコンピュータ上のディレクトリパスを指定します。絶対パスのみ使用できます。
domain=domainnameWebサイトのドメインを指定します。省略した場合は、現在のドキュメントのドメインが使用されます。
SecureCookieをサーバーへ送信する際に、HTTPSプロトコルを使用するようブラウザに指示します。

サンプルコード

以下は、HTML DOMのcookieプロパティを使用した例です。

<!DOCTYPE html>
<html>
<body>
<h1>javascript COOKIE example</h1>
<p>Click the below button to create a cookie</p>
<button type="button" onclick="cookieCreate()">CREATE</button>
<p id="Sample"></p>
<script>
   function cookieCreate(){
      var x=document.cookie;
      x="username=Matt;class=prior;location=USA;expires=Wed, 10 July 2019 12:00:00 UTC";
      document.getElementById("Sample").innerHTML="The cookie values are : "+x;
   }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

HTML DOMのcookieプロパティとは？Cookieの作成・読み取り・削除方法を解説

「CREATE」ボタンをクリックすると −

HTML DOMのcookieプロパティとは？Cookieの作成・読み取り・削除方法を解説

コードの解説

上記の例では、まずユーザーがクリックすると関数cookieCreate()を実行する「CREATE」ボタンを作成しています。

<button type="button" onclick="cookieCreate()">CREATE</button>

cookieCreate()関数は、documentオブジェクトのcookieプロパティを使ってCookieを作成します。セミコロン区切りで複数のキーと値のペアを設定し、さらにexpiresで有効期限を指定しています。作成されたCookieは、innerHTMLプロパティを通じて、id「Sample」の段落内に表示されます。

function cookieCreate(){
   var x=document.cookie;
   x="username=Matt;class=prior;location=USA;expires=Wed, 10 July 2019 12:00:00 UTC";
   document.getElementById("Sample").innerHTML="The cookie values are : "+x;
}

補足：Cookie操作の注意点

document.cookieは単一のCookieだけでなく、ページに関連付けられたすべてのCookieを読み書きする点に注意してください。また、近年のモダンなWeb開発では、より安全で直感的なAPIとしてlocalStorageやsessionStorage、あるいはjs-cookieのようなライブラリが採用されることも増えています。保存したいデータの性質や有効期限に応じて、適切な手段を選択することが重要です。

  1. HTML DOM offsetWidthプロパティの使い方をわかりやすく解説

    HTML DOM offsetWidthプロパティとは HTML DOMのoffsetWidthプロパティは、要素の実際の表示幅に対応する数値(ピクセル単位の整数)を返します。この幅にはパディング・ボーダー(境界線)・スクロールバーが含まれますが、マージンは含まれません。なお、offsetWidthは読み取り専用のプロパティのため、値を直接代入することはできません。 構文 HTMLElement.offsetWidth 要素が非表示(display: none など)の状態にある場合は、0 が返されます。 関連プロパティとの違い offsetWidth: パディング+ボーダー+スクロールバー

  2. 【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード

    offsetParentプロパティとは HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。 具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準にな