JavaScriptを使いこなそう（2）
こんにちは、さち です！
前回は JavaScript の勉強に役立つサイトを紹介しましたが
今回は実際に JavaScript で cookie を扱う方法をご紹介。
cookie を扱うプログラムをゼロから作ると大変ですが
jQuery.js（Ajaxライブラリ） を使えば簡単に実装できます。
「jquery.cookie.js」を使う
JavaScript で cookie を扱うには別途 cookie 用のライブラリを用意します。
様々なライブラリがありますが、今回は「jquery.cookie.js」を使います。
jquery.cookie.js は単独で使用しても動きません。
名前から分かるとおり「jQuery.js」が必要です。
「jQuery.js + jquery.cookie.js」の組み合わせではじめて使えます。
ライブラリをダウンロードする
まずは、jQuery.js と jquery.cookie.js がないとはじまりません。
2つのライブラリをダウンロードしましょう。
（特に理由がなければ、最新バージョンをダウンロード）
→ 「jQuery.js」のダウンロードページヘ - jQuery公式
→ 「jquery.cookie.js」のダウンロードページヘ - jQuery公式
「jquery-2.1.1.min.js」のように「min」が付いているのは
コードから 改行，コメント，空白 などを排除した軽量版です。
（「min」の有無による機能の違いはありません）
通常、jQuery.js の中身は見ないので軽量版を使えばよいです。
jQuery.js のファイルサイズが 3分の1 くらいになります。
jQuery.js については
Google Developers や jQuery公式 から直接読み込んでもOK。
ただし、相手サーバにトラブルがあった場合は
自分のサイトの jQuery にも影響が出るので注意。
使用準備をしよう
2つのライブラリを使用するページで読み込ませましょう。
通常、HTML の HEADタグ に外部ファイルとして読み込むことが多いです。
実際の記述のサンプルは下記のとおり。
<head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="/libs/jquery.js"></script> <script type="text/javascript" src="/libs/jquery.cookie.js"></script> </head>
「src="xxxx"」には各ライブラリのパス（保存場所）を記述します。
パスの記述は、相対パス，絶対パス のどちらでもよいです。
jquery.cookie.js は jquery.js のプラグインライブラリという扱いなので
必ず「jquery.js」「jquery.cookie.js」の順に記述しましょう。
これで、ページで jquery.cookie.js が使えるようになります。
使い方
実際に cookie を扱うには JavaScript に次のような記述をします。
cookie の保存
$.cookie('名前', '値', { expires: 保存日数 });
//a に sachi という値を代入
var a = 'sachi';
//user_name という cookie に sachi という値を7日間保存
$.cookie('user_name', a , { expires: 7 });
cookie の保存（保存期間指定なし）
保存期間を指定しない場合は自動で 365日 に設定されます。
$.cookie('名前', '値');
//user_nameというcookieにsachiという値を365日間保存
$.cookie('user_name', 'sachi');
cookie の取得
保存されている cookie を読み込みます。
cookie が存在しない場合は、「undefined」が返ってきます。
var a = $.cookie('名前');
//user_nameの値を呼び出しaに代入
var a = $.cookie('user_name');
cookie の削除
cookie を削除するには次の3種類の方法があります。
$.removeCookie('名前');
$.cookie('名前', null);
$.cookie('名前', '', { expires: -1 });
//関数を使って削除
$.removeCookie('user_name');
//値をnullにすることで削除
$.cookie('user_name', null);
//保存日数をマイナスにすることで削除
$.cookie('user_name', '', { expires: -1 });
cookie にオブジェクトで保存／読み込み
1つの cookie に複数の値を保存する場合はオブジェクトを利用します。
jquery.cookie.js でオブジェクトの保存／読み込みを行うには
事前に次の記述を行い JSON を有効にする必要があります（1度だけでOK）。
$.cookie.json = true;
var data = {
first: 'sachi',
last: 'umino'
};
//JSONを有効にする
$.cookie.json = true;
//user_nameというcookieにdata(オブジェクト)を保存
$.cookie('user_name', data);
//cookieからオブジェクトを読み込んでdataに代入
data = $.cookie('user_name');
これで jquery.cookie.js の説明は終わりです。
特に、簡単にオブジェクトを cookie に保存できるのは便利！
上手く使いこなして作業を楽にしましょう！
記事の作成にあたり下記サイト様を参考にさせて頂きました。
ありがとうございました。
→ javascriptライブラリjQueryでcookieを超簡単に扱う方法 - 4galaxy.net様
→ クッキーの操作 - jQuery入門講座様
→ carhartl/jquery-cookie - GitHub
☆はじめにこの記事から見た方へ☆
（1）から順に見ていただくと分かりやすくなっています！
<< 前へ ｜ JavaScriptを使いこなそう（2） ｜ 次へ（次回未定） >>
JavaScriptを使いこなそう TOPへ
コメント