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

JavaScriptでCookieを作成・設定する方法をわかりやすく解説

Cookie（クッキー）の活用は、ユーザーの設定情報、購入履歴、コミッションなど、より快適な訪問者体験やサイト統計のために必要なデータを記録・追跡するための最も効率的な方法です。

Cookieを作成する最も簡単な方法

Cookieを作成する最もシンプルな方法は、document.cookie オブジェクトに文字列値を代入することです。基本的な書式は以下のとおりです。

document.cookie = "key1=value1;key2=value2;expires=date";

expires属性による有効期限の設定

上記の expires 属性は省略可能です。有効な日付または時刻を指定すると、Cookieはその日時をもって期限切れとなり、それ以降はその値にアクセスできなくなります。逆に expires を指定しない場合、Cookieはブラウザセッションが終了するまで保持されます。

Cookieの値を保存する際の注意点

注意： Cookieの値には、セミコロン（;）、カンマ（,）、空白文字を含めることはできません。そのため、値をCookieに保存する前に、JavaScriptの escape() 関数を使ってエンコードしておくことをおすすめします。エンコードした場合は、Cookieの値を読み取る際に対応する unescape() 関数を使用してデコードする必要があります。

なお、escape() / unescape() は現在では非推奨（deprecated）の関数です。近年の開発では、代わりに encodeURIComponent() および decodeURIComponent() を使用することが推奨されています。

実装例：顧客名をCookieに保存する

以下のコードを実行してみてください。フォームに入力された顧客名をCookieとして保存するシンプルな例です。

動作デモ：

<html>
   <head>
      <script>
         <!--
            function WriteCookie() {
               if( document.myform.customer.value == "" ) {
                  alert("Enter some value!");
                  return;
               }
               cookievalue= escape(document.myform.customer.value) + ";";
               document.cookie = "name = " + cookievalue;
               document.write ("Setting Cookies : " + "name = " + cookievalue );
            }
         //-->
      </script>
   </head>
   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
      </form>
   </body>
</html>

このサンプルでは、テキストボックスが空のままボタンが押された場合はアラートで警告を表示し、値が入力されていれば escape() でエンコードしたうえで document.cookie に書き込みます。これにより、ページを再読み込みしても顧客名の情報を参照できるようになります。

  1. JavaScriptでオートコンプリート（入力補完）機能を実装する方法

    JavaScriptによるオートコンプリートの実装検索フォームなどでユーザーの入力に合わせて候補を自動的に表示する「オートコンプリート（入力補完）」機能は、JavaScriptを使えばライブラリなしでも実装できます。本記事では、配列に格納されたデータを候補として表示し、マウスクリックやキーボード操作で選択できるオートコンプリートの作り方を、完全なサンプルコードとともに解説します。実装のポイントこのサンプルでは以下のような仕組みでオートコンプリートを実現しています。inputイベント：テキストフィールドに入力があるたびに発火し、入力値と前方一致する項目を候補リストとして動的に生成します。キーボー

  2. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /