jQueryでCookieを使う場合のベストな方法と代替になるローカルストレージ(localStorage)の使用方法

jQueryでCookieを使う場合のベストな方法


JavascriptでCookieを使う場合、記述が冗長になりがちであるため、jQueryを使ったCookieの制御がおすすめです。

使う場合は、事前に「jQuery」と「jquery.cookie.js」読み込んでおきます。

<!--
    jQuery(メイン読み込み)
=========================================================== -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!--
    jquery.cookie.js(読み込み)
=========================================================== -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Cookieを設置したり読みだす場合は

//設定時:$.cookie(Cookie名, 値);
$.cooki('page', 'event');

//読み出し時:$.cookie(Cookie名);
var page = $.cooki('page');

のように行います。有効期間の設定などもできますので詳細は公式を参照してください。

Cookieではなく「localStorage」(ローカルストレージ)を使う方法


IE8以上などのブラウザであれば、Cookieの代替手段として「localStorage」(ローカルストレージ)を使う方が便利です。Cookieよりも記録容量が多いので、フォーム入力された内容をブラウザに記憶させておくなどの使い方もできます。

また、jQueryには依存しないブラウザとしての機能なので、その点でも利便性が高いといえます。

先ほど、Cookieで書いた内容を「localStorage」で書くと以下のようになります。

//設定時:localStorage.setItem(Cookie名, 値);
localStorage.setItem('page', 'event');

//読み出し時:localStorage.getItem(Cookie名);
var page = localStorage.getItem('page');

//削除時:localStorage.removeItem(Cookie名);
localStorage.removeItem('page');

使い方はさきほどとほぼ同等です。(設定と読み出しで「setItem」と「getItem」の違いがあるので注意してください)

IE7以下を無視できるなら、おすすめはこちらの方法です。


最新記事はトップページで!

京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!