【2019年最新版】JavaScriptプラグインjs-cookieで超簡単にクッキー管理

ブラウザCookieを簡単に操作管理できるJavaScriptプラグインjs-cookieの使い方を紹介します。
jquery-cookieというプラグインもありますが、jqueryに依存するうえ開発も終わっているため、これからはjs-cookieを使いましょう。

js-cookieとは

js-cookieはブラウザのクッキーの保存や取得に便利なJavaScriptプラグインです。
900バイトととても軽量ながら、JSONをサポートしているため、クッキーの操作はこのプラグインひとつにまかせておけば良さそうです。
Githubのスターの数も検索「cookie」で一位ですしね。

インストール

ダウンロード

Githubからダウンロードできます。

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

CDN経由でも使用できます。

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

 

上記のコードを</body>の直前に貼り付けましょう。

html
<!DOCTYPE html>
<html>
<head>
  ...
</head>
<body>
  コンテンツ...
  // ↓ここに貼り付け
  <script type="text/javascript">
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
  </script>
</body>
</html>

 

パッケージマネージャー

js-cookieはnpmBowerをサポートしています。

NPM

$ npm install js-cookie --save

ES6

import Cookies from 'js-cookie';

使い方

Cookieの保存

JavaScript
Cookies.set('name', 'value');
const pizza = "ピザマンください"
Cookies.set('pizzamanz_cookie', pizza);

Cookieの保存(期限付き)

Cookies.set(‘name’, ‘value’, { expires: 7 });

expiresの使い方
expiresは有効期限(日数)です。
・有効期限を1年に設定する場合 expires: 365
・半日に設定する場合 expires: 0.5
・30分後に設定する場合 expires: 1/48
1日後にクッキーが削除される設定
const pizza = "このピザマン、明日に破棄してください。"
Cookies.set('pizzamanz_cookie', pizza, { expires: 1 });
半日後にクッキーが削除される設定
const pizza = "このピザマン、明日に破棄してください。"
Cookies.set('pizzamanz_cookie', pizza, { expires: 0.5 });

Cookieの取得

Cookies.get(‘name’);

JavaScript
const pizza = Cookies.get('pizzamanz_cookie');
console.log(pizza)
// このピザマン、明日に破棄してください。

Cookieの削除

Cookies.remove(‘name’);

JavaScript
Cookies.remove('pizzamanz_cookie');
const pizza = Cookies.get('pizzamanz_cookie')
console.log(pizza)
// undefined