「jquery.cookie.js」プラグインを利用するとクッキーへの情報記述や情報取得が簡単にできるようになります。クッキーを利用すれば、初めてサイトを訪れる人にサイトの説明を表示したり、サイト上の設定を記憶することができます。使い方次第でサイトのユーザビリティやアクセシビリティが向上するのではないでしょうか。上の画像をクリックするとサンプルが開きます。このサンプルで「カウントアップ」のボタンをクリックし、表示されるクリック回数が変わるのを確認して下さい。その後ページを閉じて、再び開いてもクッキーの情報を取得してクリック数が表示されます。GitHub※リンク先に利用方法が記述されています。htmlへの組み込みは以下の様に、jQuery同様scriptタグでリンクします。プラグインはjQueryのリンクより後に記述するようにしましょう。「jquery.cookie.js」プラグインを組み込むと、以下のcookieメソッドが追加されます。cookieメソッドはjQueryに直接利用します(jQueryは$に置き換えることが可能です)。第1引数しか設定しない場合はクッキー情報の取得、第2引数を設定することでクッキー情報の設定ができます。)※指定したクッキーがない場合はnullを返します。[,オプション])・オプションはobjectオブジェクトで設定し、以下のプロパティが利用できます・expires:有効期限(日数)・path:クッキーのパス(もしドメイン全体で利用したいなら'/'を設定)・domain:クッキーを有効にしたいドメイン・secure:trueにすると「https」の時にだけ値を返すようになります。解説クッキー情報の取得まずはクッキー情報を取得するサンプルを紹介します。サンプル(cookie/01.html)を開いてbody内にdiv要素しか無いことを確認して下さい。ここにクッキー情報を表示します。jQueryは、まず以下の部分を確認して下さい。クッキーを利用する際は最初にクッキー情報を読み込みます。このサンプルではhtml要素の読込が完了したらreadFuncを実行するようにしています。$(function(){readFunc();});readFuncは以下の様に記述され、2行目でcookieメソッドを利用して「testCounter」という名のクッキー情報を取得します。最初はクッキー情報が無いためnullが返ってきますが、その場合は変数myCounterに0を設定しています。dispCounterFuncはdiv要素に変数myCounterを表示するだけです。0;dispCountFunc();}まだクッキーの情報がないので、結果としてdiv要素に「いままでのクリック回数は0回です。次はクッキー情報を設定するサンプルを紹介します。サンプル(cookie/02.html)を開いてbody内にid属性がcountのbutton要素が追加されたのを確認して下さい。id="count">カウントアップ</button>jQueryは以下の処理が追加され、id属性がcountのbutton要素をクリックすると、readFuncで読み取ったクッキー情報の値「myCounter」に1足します。3行目でcookieメソッドを利用して「testCounter(クッキー名)」の値として変数myCounterを設定します。最後に4行目でdispCountFuncを実行してmyCounterの値をdiv要素に表示します。myCounter);dispCountFunc();})このサンプルで「カウントアップ」ボタンをクリックして表示される数値(変数myCounter)の値を上げて下さい。値を上げたらページを閉じて再びサンプル(cookie/02.html)を開いて下さい。クッキー時クリックした情報が保存されているので、前回クリックしたのと同じ回数が表示されるはずです。このように「jquery.cookie.js」プラグインを利用すると、簡単にクッキーの操作をすることができます。クッキーの削除クッキーを削除したい場合はnullを設定します。サンプル(cookie/03.html)を開いてbody内にid属性がresetのbutton要素が追加されたのを確認して下さい。id="reset">クッキー消去</button>jQueryは以下の処理が追加され、id属性がresetのbutton要素をクリックすると、cookieメソッドを利用して「testCounter(クッキー名)」の値にnullを設定して情報を削除します。$("#reset").click(function(){$.cookie("testCounter",null);})実際に「クッキーを削除」ボタンをクリックしてからページを閉じて下さい。サンプル(cookie/03.html)を開くとクッキーが削除されているためカウントが0に戻っています。メモコンフィグjquery.cookieプラグインはクッキーの操作に関して、仕様(コンフィグ)を変更することができます。クッキーの情報は通常URIエンコードされて設定されますが、以下の様にrawプロパティにtrueを設定することで、エンコードせずに生データのまま設定することができます。私にはメリットがよく分かりません...。true;また以下の様に、jsonプロパティをtrueにすると、クッキーにjsonデータが設定されている場合は自動的にパースされてます。これは複数のデータをまとめて保存する時に便利だと思うので、サンプルを紹介します。true;サンプル(cookie/test01.html)を開いてbody内に2つのテキストフィールド(id属性はnameとage)とbuttonがあることを確認してください。jQueryでは、まず以下の部分を確認して下さい。html要素が読み込まれるとreadFuncを実行します。buttonをクリックするとwriteFuncを実行します。{writeFunc();});});readFuncは以下の様に記述され、2行目で「jsonData」というクッキーの情報を取得しています。クッキーの情報が無い場合は3行目のif文によって後の処理を実行しないようにしています。ポイントなのが4,5行目で取得したクッキー情報「myData」に対してプロパティを指定して値を取得している点です(myData.nameやmyData.ageの部分)。クッキーは文字列しか保存できないため、通常はこのように利用できません。return;$("#name").val(myData.name);$("#age").val(myData.age);}何故この様な処理が可能なのかというと、javaScriptの最初に部分に記述した以下の設定があるためです。jsonプロパティをtrueにする事で、jsonデータをクッキーに保存する時は文字に変換され、取得する場合は文字列をjsonデータに戻してくれるのです。true;writeFuncは以下の様に記述され、2行目でクッキーに保存するjsonデータ「myData」を作成し、3,4行目でnameプロパティとageプロパティの値としてテキストフィールドの値を設定しています。5行目でcookieメソッドを利用して値を保存しています。myData);}結果として、名前と年齢を記述して「クッキーに記憶」ボタンをクリックすると、ページを閉じてから再び開いてもクッキーの情報を利用して記憶した情報が設定されます。この機能はjavaScriptのJSON.stringifyメソッドやJSON.parseを利用しているためIE6,7では利用できません。