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

JavaScriptでCookieを読み取る方法を解説！サンプルコード付き

JavaScriptでは、document.cookieプロパティを使用することで、ブラウザに保存されているCookieを簡単に読み取ることができます。本記事では、実際に動作するサンプルコードをもとに、Cookieの読み取り方法をわかりやすく解説します。

注意：このサンプルを実行するには、ローカルサーバー環境が必要です。HTMLファイルを直接ブラウザで開いた場合、Cookieが正しく機能しないことがあります。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 18px;
      font-weight: 500;
      color: blueviolet
   }
</style>
</head>
<body>
<h1>Read a cookie using JavaScript</h1>
<div class="result"></div>
<button class="Btn">Click here</button>
<h3>Click on the above button to read the cookie</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   document.cookie = "Name=Rohan Sharma";
   BtnEle.addEventListener("click", () => {
      resEle.innerHTML = document.cookie;
   });
</script>
</body>
</html>

コードのポイント

  • document.cookie = "Name=Rohan Sharma"; の部分で、「Name」というキーに値を設定したCookieを作成しています。
  • ボタンがクリックされると、document.cookie を読み取り、その内容が .result クラスの要素内に表示されます。
  • document.cookie は、保存されているすべてのCookieを「キー=値; キー=値」という形式の文字列として返します。複数のCookieがある場合はセミコロン（;）で区切られます。

出力結果

ページを起動すると、次のような画面が表示されます。

JavaScriptでCookieを読み取る方法を解説！サンプルコード付き

続いて、「CLICK HERE」ボタンをクリックしてみましょう。

JavaScriptでCookieを読み取る方法を解説！サンプルコード付き

ボタンをクリックすると、あらかじめ設定しておいたCookie（Name=Rohan Sharma）の内容が画面上に表示されます。このように、document.cookie を使うことで、保存済みのCookie情報を手軽に取得できます。

  1. JavaScriptでJSON配列からデータを読み取る方法をサンプルコード付きで解説

    Web開発では、APIから取得したJSONデータを処理する場面が非常によくあります。本記事では、JavaScriptを使ってJSON配列からデータを読み取り、画面に表示する方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 JSON配列からデータを読み取る基本の流れ JSON形式の文字列をJavaScriptで扱うには、まずJSON.parse()メソッドで文字列をJavaScriptのオブジェクト（配列）に変換します。変換後は、forEach()メソッドなどを活用して、配列の各要素に格納された値へ簡単にアクセスできます。 サンプルコード <!DOCTYPE htm

  2. 【JavaScript入門】配列を使ってラジオボタンを動的に生成する方法

    JavaScriptでは、配列のデータをもとにラジオボタンを動的に生成することができます。その際に活用するのが、要素を作成する createElement() メソッドと、作成した要素を画面に追加する appendChild() メソッドです。 サンプルコード 以下は、性別の選択肢を配列で管理し、それを元にラジオボタンを自動生成するコード例です。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <meta name=viewport content=width=devic