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