スポンサーリンク

JavaScriptで簡単にcookieを扱おう

この記事は約6分で読めます。

JavaScriptを使いこなそう(2)
【2014/6/11】 大幅に加筆修正しました
イメージ

こんにちは、さち です!

前回は 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 DevelopersjQuery公式 から直接読み込んでも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へ

コメント

タイトルとURLをコピーしました