ブラウザ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 --saveES6
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は有効期限（日数）です。・有効期限を１年に設定する場合 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
