簡単にCookie(クッキー)を操作できるJavaScript Cookie

JavaScriptでCookieを簡単に扱える、JavaScript Cookieを紹介します。JavaScript Cookieが提供しているAPIを使うと、JavaScriptでのクッキーを読み書きなどの操作を簡単に行えるようになります。

ちなみに、以前jquery.cookieという似た目的のjQueryプラグインがあったのですが、JavaScript Cookieに移動したそうです。

JavaScriptでCookie操作は面倒

クライアントサイドでクッキーの操作をするのって面倒ですよね?個人的には面倒だと思います。Cookie書き込みだけでこんな感じでしょうか?

function setCookie(name, value, days, options) {
  var cookieString = name + '=' + value;
  var date = new Date();
  date.setTime(date.getTime() + days * 86400 * 1000);
  cookieString += '; expires=' + date.toUTCString();
  // めんどいので省略...
  document.cookie = cookieString;
}
setCookie('foo', 'BAR', 7, {'path': '/admin/'});

一度かちっとしたコードを書き、それをライブラリとして使いまわせばいいのですが、メンテとか考えると正直面倒です。。。

JavaScript Cookieを利用

JavaScript Cookieを使うと、JavaScriptから簡単にCookieを操作できるようになります!

使い方は非常に簡単で、ダウンロードしたJSファイルを読み込み、

<script src="/path/to/js.cookie.js"></script>

Cookies.setを使って書き込むだけです。

Cookies.set('foo', 'BAR', {expires: 7, path: '/admin/'});

また、読み出しや削除もできます。

Cookies.get('foo');
Cookies.remove('foo');

JavaScript Cookieのサンプル

JavaScript Cookieを使ったサンプルを紹介します。なお、このサンプルで使ったJavaScript Cookieのバージョンは1.5.1です。

JavaScript Cookieのサンプル

このサンプルでは、ラジオボタンのどれかを選択するとCookieに値を書き込みます。

「Cookie確認」をクリックするとCookieの値を表示し、「Cookie削除」をクリックするとCookieの値を削除します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <style>
      button {
        font-size: 18px;
      }
    </style>
    <script src="./js.cookie-1.5.1.min.js"></script>
    <script>
    function changeNum(elem) {
      Cookies.set('num', elem.value, {expires: 14, path: 'jquery_cookie/'});
    }

    function showNum() {
      alert(Cookies.get('num'));
    }

    function removeNum() {
      Cookies.remove('num');
    }
    </script>
  </head>
  <body>
    <p>
      表示件数
    </p>
    <ul>
      <li><input name="num" id="num_10" type="radio" value="10" onchange="changeNum(this);" /><label for="num_10">10件</label></li>
      <li><input name="num" id="num_20" type="radio" value="20" onchange="changeNum(this);" /><label for="num_20">20件</label></li>
      <li><input name="num" id="num_50" type="radio" value="50" onchange="changeNum(this);" /><label for="num_50">50件</label></li>
    </ul>
    <button id="show_cookie" type="button" onclick="showNum();">Cookie確認</button>
    <button id="remove_cookie" type="button" onclick="removeNum();">Cookie削除</button>
  </body>
</html>

JavaScript Cookieを使って、Cookieの操作周りがスッキリしました!!

この記事が役に立った場合、シェアしていただけると励みになります!!