Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

JavaScriptクッキー

Cookieを使用すると、Webページにユーザー情報を保存できます。

クッキーとは？

Cookieは、コンピュータ上に小さなテキストファイルとして保存されるデータです。

WebサーバーがWebページをブラウザーに送信すると、接続がシャットダウンされ、サーバーはユーザーに関するすべてを忘れます。

Cookieは、「ユーザーに関する情報をどのように記憶するか」という問題を解決するために発明されました。

  • ユーザーがWebページにアクセスすると、ユーザーの名前がCookieに保存されることがあります。
  • ユーザーが次にそのページにアクセスすると、Cookieはユーザーの名前を「記憶」します。

Cookieは、次のような名前と値のペアで保存されます。

username = John Doe

ブラウザがサーバーからWebページをリクエストすると、ページに属するCookieがリクエストに追加されます。このようにして、サーバーはユーザーに関する情報を「記憶」するために必要なデータを取得します。


ブラウザのローカルCookieサポートがオフになっている場合、以下の例はどれも機能しません。




JavaScriptでCookieを作成する

JavaScriptは、document.cookieプロパティを使用してCookieを作成、読み取り、削除できます。

JavaScriptを使用すると、次のようにCookieを作成できます。

document.cookie = "username=John Doe";

有効期限(UTC時間)を追加することもできます。デフォルトでは、ブラウザーを閉じるとCookieは削除されます。

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

パスパラメータを使用すると、Cookieが属するパスをブラウザに伝えることができます。デフォルトでは、Cookieは現在のページに属します。

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

JavaScriptでCookieを読み取る

JavaScriptを使用すると、Cookieは次のように読み取ることができます。

let x = document.cookie;

document.cookieは、cookie1=value;のように、すべてのCookieを1つの文字列で返します。cookie2=値; cookie3=値;

JavaScriptでCookieを変更する

JavaScriptを使用すると、Cookieを作成するときと同じ方法でCookieを変更できます。

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

古いCookieは上書きされます。

JavaScriptでCookieを削除する

Cookieの削除は非常に簡単です。

Cookieを削除するときに、Cookieの値を指定する必要はありません。

Expiresパラメータを過去の日付に設定するだけです。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

正しいCookieを確実に削除するには、Cookieパスを定義する必要があります。
一部のブラウザでは、パスを指定しないとCookieを削除できません。

クッキー文字列

プロパティdocument.cookieは通常のテキスト文字列のように見えます。そうではありません。

Cookie文字列全体をdocument.cookieに書き込んだとしても、それを再度読み出すと、名前と値のペアしか表示されません。

新しいCookieを設定しても、古いCookieは上書きされません。新しいCookieがdocument.cookieに追加されるため、document.cookieを再度読み取ると、次のような内容が得られます。

cookie1 = 値; cookie2 = 値;

すべてのCookieを表示Cookie1を作成Cookie2を作成 Cookie1を削除 Cookie2を削除

指定された1つのCookieの値を検索する場合は、Cookie 文字列でCookieの値を検索するJavaScript関数を作成する必要があります。

JavaScript Cookieの例

次の例では、訪問者の名前を保存するCookieを作成します。

訪問者が初めてWebページにアクセスすると、名前を入力するよう求められます。その後、名前はCookieに保存されます。

訪問者が次に同じページに到着すると、ウェルカムメッセージが表示されます。

この例では、3つのJavaScript関数を作成します。

  1. Cookieの値を設定する関数
  2. Cookie値を取得する関数
  3. Cookieの値をチェックする関数

Cookieを設定する機能

まず、訪問者の名前をCookie変数に保存する関数functionを作成します。

例

function setCookie(cname, cvalue, exdays) {   const d = new Date();   d.setTime(d.getTime() + (exdays*24*60*60*1000));   let expires = "expires="+ d.toUTCString();   document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; }

例の説明:

上記の関数のパラメーターは、Cookieの名前(cname)、Cookieの値(cvalue)、およびCookieの有効期限が切れるまでの日数(exdays)です。

この関数は、cookiename、cookieの値、およびexpires文字列を一緒に追加して、cookieを設定します。

Cookieを取得する関数

次に、指定されたCookieの値を返す関数functionを作成します。

例

function getCookie(cname) {  let name = cname + "=";  let decodedCookie = decodeURIComponent(document.cookie);   let ca = decodedCookie.split(';');   for(let i = 0; i <ca.length; i++) {     let c = ca[i];     while (c.charAt(0) == ' ') {       c = c.substring(1);     }     if (c.indexOf(name) == 0) {       return c.substring(name.length, c.length);     }   }   return ""; }

機能の説明:

cookienameをパラメーター(cname)として受け取ります。

検索するテキスト(cname + "=")を含む変数(name)を作成します。

Cookie文字列をデコードして、特殊文字を含むCookie を処理します。 '$'

document.cookieをセミコロンでcaという配列に分割します(ca = decodedCookie.split(';'))。

ca配列(i = 0; i < ca.length; i++)をループし、各値 c = ca[i])を読み取ります。

Cookieが見つかった場合(c.indexOf(name) == 0)、Cookieの値(c.substring(name.length, c.length)を返します。

Cookieが見つからない場合は、"" を返します。

Cookieをチェックする機能

最後に、Cookieが設定されているかどうかを確認する関数を作成します。

Cookieが設定されている場合は、挨拶が表示されます。

Cookieが設定されていない場合は、ユーザー名の入力を求めるプロンプトボックスが表示され、setCookie関数を呼び出すことでユーザー名のCookieが365日間保存されます。

例

function checkCookie() {   let username = getCookie("username");   if (username != "") {    alert("Welcome again " + username);   } else {     username = prompt("Please enter your name:", "");     if (username != "" && username != null) {       setCookie("username", username, 365);     }   } }

今すぐみんなで一緒に

例

function setCookie(cname, cvalue, exdays) {   const d = new Date();  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));   let expires = "expires="+d.toUTCString();   document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } function getCookie(cname) {   let name = cname + "=";   let ca = document.cookie.split(';');   for(let i = 0; i < ca.length; i++) {     let c = ca[i];     while (c.charAt(0) == ' ') {       c = c.substring(1);     }     if (c.indexOf(name) == 0) {       return c.substring(name.length, c.length);     }   }   return ""; } function checkCookie() {   let user = getCookie("username");   if (user != "") {     alert("Welcome again " + user);   } else {     user = prompt("Please enter your name:", "");     if (user != "" && user != null) {       setCookie("username", user, 365);     }   } }

自分で試してみる»

上記の例では、checkCookie()ページの読み込み時に機能します。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル