【JavaScript】Cookieに値を保存する関数

JavaScriptを使ってCookieに値を保存するサンプルコードを作成してみます。※セキュリティやデータのサイズに注意しながら利用してください。

document.cookie

document.cookieを使うことで、cookieに値を保存したり読み込んだり削除できます。

<script>
// Cookieに値を保存する関数
function setCookie(key, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = encodeURIComponent(key) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

// Cookieから値を取得する関数
function getCookie(key) {
  var name = encodeURIComponent(key) + "=";
  var cookieArray = document.cookie.split(';');
  for (var i = 0; i < cookieArray.length; i++) {
    var cookie = cookieArray[i].trim();
    if (cookie.indexOf(name) === 0) {
      return decodeURIComponent(cookie.substring(name.length, cookie.length));
    }
  }
  return null;
}

// Cookieから値を削除する関数
function deleteCookie(key) {
  document.cookie = encodeURIComponent(key) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
}
</script>

• setCookie(key, value, days)関数は、指定されたキーと値をCookieに保存します。オプションのdaysパラメータを使用して、Cookieの有効期限を指定することもできます。
• getCookie(key)関数は、指定されたキーに対応するCookieの値を取得します。
• deleteCookie(key)関数は、指定されたキーに対応するCookieを削除します。

window.onloadイベントを使用する

window.onloadイベントを使用して、ページを開いたタイミングでCookieに値を保存します。

[rml_read_more]

<script>
  window.onload = function() {
    // Cookieに値を保存する例
    setCookie("username", "John Doe", 7); // 7日間有効なCookieを保存

    // Cookieから値を取得する例
    var username = getCookie("username");
    console.log(username); // 出力: "John Doe"

  };
</script>

Cookieの値を確認する

ブラウザの開発者ツールのコンソール（通常はF12キーを押して開きます）を開き、スクリプトが正常に実行され、Cookieの値が出力されているかどうかを確認してください。

デベロッパーツールの「Application」セクション（または「Storage」セクション）を確認して、Cookieが正しく保存されているか確認できます。

Cookieの値を削除する

Cookieの値を削除する場合は、deleteCookie関数を使います。

<button onclick="deleteCookie('username')">Cookieを削除</button>

引数にCookieのNameを指定することで、該当のCookieを削除できます。「Cookieを削除」ボタンを作りました。

クリックすると、Cookieが削除されました。

まとめ

document.cookieを使用することで、Cookieに値を保存したり読み込んだり削除することができます。

※セキュリティやデータのサイズに注意しながら利用してください。