Zenn
🍪

JavaScriptでCookieにデータを保存する

2024/11/23に公開
HTML
JavaScript
cookie
tech

はじめに

Cookieは、平たく言えばウェブサイトを閉じてもデータが消えないように保存する仕組みです。
この記事ではフレームワークを用いないで、JavaScirptを使ってCookieにデータを保存し、呼び出す方法を解説します。

サンプルコード

今回作るものは本当に簡素で、以下のようなものにします。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cookie履歴保存</title>
</head>
<body>
  <h1>Cookieに保存するフォーム</h1>
  <form id="textForm">
    <label for="textInput">文字を入力してください:</label><br>
    <input type="text" id="textInput" required>
    <button type="submit">保存</button>
  </form>
  <h2>履歴</h2>
  <ul id="historyList"></ul>

  <script src="script.js"></script>
</body>
</html>
script.js
function setCookie(name, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  const expires = date.toUTCString();
  document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
}

function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    const [key, val] = cookie.split("=");
    if (key === name) {
      return decodeURIComponent(val).split(",");
    }
  }
  return [];
}

function renderHistory() {
  const historyList = document.getElementById("historyList");
  const history = getCookie("history").filter(Boolean);
  historyList.innerHTML = "";
  history.forEach(item => {
    const li = document.createElement("li");
    li.textContent = item;
    historyList.appendChild(li);
  });
}

document.getElementById("textForm").addEventListener("submit", (e) => {
  e.preventDefault();
  const textInput = document.getElementById("textInput");
  const newText = textInput.value.trim();
  if (newText) {
    const currentHistory = getCookie("history");
    currentHistory.push(newText);
    setCookie("history", currentHistory.join(","), 7);
    renderHistory();
    textInput.value = "";
  }
});

window.onload = renderHistory;

コードの解説

HTML

textForm

文字を入力し、送信するパーツです。

historyList

Cookieに保存されているデータを一つずつリスト形式で表示します。

JavaScript

setCookie

Cookieにデータを保存します。
例：setCookie(キー、保存するデータ、保存される日数）

getCookie

nameというキーに紐づけられている、Cookieに保存されているデータを取得します。
今回はデータを配列で返すように作っています。

renderHistory

historyListに、Cookieに保存されているデータをすべて表示します。

その下

textFormの保存ボタンが押されたらCookieに書かれている文章を保存します。

Cookieとは？

Cookieは、ウェブサイトがユーザーのブラウザに保存する小さなデータのことです。ユーザーの識別や状態の保持に利用され、主に以下のような用途で使用されます：

  • セッション管理: ユーザーのログイン情報やショッピングカートの内容を保持。
  • パーソナライズ: ユーザーの言語設定やテーマなどのカスタマイズ情報を保存。
  • トラッキング: ユーザーの行動を追跡して分析や広告に活用。

Cookieは、ウェブサーバーまたはJavaScriptを使用してブラウザ内に保存され、後続のリクエストでサーバーに送信されます。

Cookieのデータ保存方法

Cookieは、以下の形式でデータを保存します

key=value; expires=date; path=/; domain=example.com; secure; HttpOnly;

簡単に言えば、key（データの名前のようなもの）に、value（実際のデータ）を保存している、ということです。

各属性の説明

  1. key=value

    • 保存されるデータの「キー」と「値」を表します。
    • 例: username=JohnDoe

  2. expires

    • Cookieの有効期限を設定します。指定された日時を過ぎるとCookieは無効になります。
    • 例: expires=Fri, 31 Dec 2024 23:59:59 GMT

  3. path

    • Cookieが有効なパスを指定します。このパス以下でのみCookieが利用可能です。
    • 例: path=/ (サイト全体で有効)

  4. domain

    • Cookieが有効なドメインを指定します。
    • 例: domain=example.com

  5. secure

    • HTTPS通信でのみCookieを送信する場合に設定します。

  6. HttpOnly

    • JavaScriptでCookieを操作できないように設定する属性です。セキュリティ向上に利用します。

Discussion