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

Sponsored Link

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以下を無視できるなら、おすすめはこちらの方法です。

Sponsored Link

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

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


購読するならRSSをご利用ください!

RSSはこちらをご利用ください。


マスコミ各社様の記事使用規約についてはこちらをご覧ください。

当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。
当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。また、Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。