JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのdocument.cookieでcookieの書き込み

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

document.cookie

JavaScriptのdocument.cookieでcookieの書き込み

JavaScriptのdocument.cookieでcookieの書き込み

JavaScriptでは、ブラウザのcookieファイルに情報を書き込んで利用することができます。

document.cookie

cookieファイルへデータを書き出すには、document オブジェクトの cookie プロパティを使って設定します。

document.cookie = cookieの名前 = 値[;expires=dateValue]

それぞれ、記述する内容については以下の通りです。

  • cookie名 … cookieの名称
  • 値 … cookieファイルに付与する情報
  • dateValue … cookieの有効期限
かかかず
かかかず

ただし、ブラウザ側でcookieの書き込みを禁止している場合は無効になるので注意しましょう。

ボタンクリックでdocument.cookieが実行されるサンプル

それでは、document.cookieが実行されるサンプルです。

ボタンをクリックすると、ブラウザのcookieに「JS_Cookie」の名称で書き込みされ、アラートが表示されます。

完了すると、当サイトのドメインからcookieが発行されているので確認してみましょう。

cookieのキャプチャ
cookie書き込みされた後
かかかず
かかかず

ボタンクリックで、上記のようにcookieが書き込みされます。

document.cookieでcookieを書き込むサンプルのコード

まずは、HTMLです。HTMLは、cookieを書き込みする何かはないのでシンプルな作りです。

<button id="cookieBtn">cookieを書き込むボタン</button>

続いて、JavaScriptですがボタンの.addEventListener クリックイベントで、cookieの書き込みが発動する仕組みです。

document.querySelector('#cookieBtn').addEventListener('click', () => {
C_Name="JS_Cookie"

Now_Time = new Date();
GMT_Time = Now_Time.toGMTString();

Expires_Time = new Date();
Day = 24 * 60 * 60 * 1000;
Expires_Time.setTime(Now_Time.getTime() + Day *30);
GMT_Expires_Time = Expires_Time.toGMTString();

document.cookie = C_Name+"="+GMT_Time+";expires="+GMT_Expires_Time;
alert('cookieへの書き込みが完了しました。');
});

上から順に、C_Name でcookie名を定義して、ファイルの書き込みが発生した時間をGMT_Time で定義。そして、Expires_Time でcookieの有効期限を設定して、最後に document.cookie = で書き込みを行なっています。

かかかず
かかかず

ちなみにサンプルの有効期限は、30日です。