javascript Cookieを利用する

javascript Cookieを利用する

javascriptで、Cookieを利用するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

Cookie書き出し

ブラウザに保存される情報である「cookie」をjavascirpitで書き出す場合は「document.cookie」を使用します。

chromeから書き出したcookieを確認してみます。

「F12」キーで「デベロッパーツール」を起動して「Application」を選択して「Cookies」をクリックします。

書き出した「cookie」を確認することができます。

Cookie読み込み

さきほど作成した「Cookie」を読み込んで、フロントに表示してみます。

ボタンをクリックすると、保存されている「Cookie」が読み出されて表示されていることが確認できます。

また、以下のコードを、

document.getElementByIdの省略とアロー関数を使用して、簡潔に記述することもできます。

Cookie属性

Cookieに指定できる属性には、以下のものがあります。

  • Expires=日時 : Cookieの有効期限(日付)
  • Max-Age=数値 : Cookieの有効期限(秒数)
  • Domain=ドメイン名 : Cookieを送信するドメイン(設定しない方が安全)
  • Path=PATH : Cookieを送信するPATH
  • Secure : https の通信のみクッキーを送信
  • HttpOnly : document.cookieを使ってCookieを扱えなくする
  • SameSite=VAL : 他サイト経由でリクエスト時にCookieを送信するかどうか

javascriptで設定する場合は、以下のようにします。

サンプルコード

以下は、
ロード時に「Cookie」を書き出して、「button」をクリックすると、書き出した「cookie」を読み込む
サンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

「cookie」が読み出されていることが確認できます。