【JavaScript】Vanilla JSで書かれたクッキー操作「js-cookie」
jQueryに依存しないcookieプラグイン「js-cookie.js」をご紹介。
Index
この記事を読んでる人におすすめの書籍
js-cookieとは
Cookieを扱うためのシンプルで軽量なJavaScript APIです。
- すべてのブラウザで動作
- どんな文字でも使用可能
- 十分なテスト
- 依存性がない
- ESモジュールのサポート
- AMD/CommonJSをサポート
- RFC6265に準拠
- 便利なWiki
- カスタムエンコード/デコードの有効化
こちらからダウンロード出来ます。
使い方
1.ファイルを読み込む
js.cookie.min.jsファイルを読み込ませる。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="path/to/js.cookie.min.js"></script>
</body>
</html>
cookieの設定
処理ごとの各種設定。
サイト全体で有効なCookieを保存します。
nameに保存するクッキー名、valueに保存する値を設定します。
Cookies.set('name', 'value')サイト全体で有効な、今から7日後に期限が切れるクッキーを作成します。
クッキーがいつ削除されるかを定義します。値は作成時からの有効日数とする数値か、もしくはクッキーが無効になる日付を設定します。
詳しくは【cookieの属性(オプション)】にて後述。
Cookies.set('name', 'value', { expires: 7 })現在のページのパスに対して有効な、期限切れのクッキーを作成する。
Cookies.set('name', 'value', { expires: 7, path: '' })クッキーを読み込む
Cookies.get('name') // => 'value' ※クッキーが設定されている場合
Cookies.get('nothing') // => undefined ※クッキーが設定されていない場合表示されているすべてのクッキーを読む
Cookies.get() // => { name: 'value' }注意：クッキーの属性の一つを渡して、特定のクッキーを読むことはできません。
Cookies.get('foo', { domain: 'sample-domain.com' }) // domain属性は何の効果も持しません。クッキーを削除
Cookies.remove('name')現在のページのパスに対して有効なクッキーを削除します。
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // 失敗!
Cookies.remove('name', { path: '' }) // 削除されました!重要! クッキーを削除するときにデフォルトの属性に依存しない場合は、クッキーを設定するときに使用したのとまったく同じパスとドメインの属性を渡さなければなりません。
Cookies.remove('name', { path: '', domain: 'sample-domain.com' })注意: 存在しないクッキーを削除しても、例外エラーは発生せず、値も返しません。
cookieの属性(オプション)
クッキー属性のデフォルトは、withAttributes() を使って api のインスタンスを作成することでグローバルに設定できます。また、最後の引数にプレーンオブジェクトを渡すことで、Cookies.set(…) の各コールに対して個別に設定できます。呼び出しごとの属性は、デフォルトの属性を上書きします。
expires: 有効期限を指定
クッキーがいつ削除されるかを定義します。値は作成時からの有効日数とする数値か、もしくはDateインスタンスでなければなりません。省略された場合、クッキーはセッションクッキー(ブラウザを閉じるとリセットされる設定)になります。
Default: ブラウザを閉じたときにCookieを削除。
Cookies.set('name', 'value', { expires: 365 }) // 365日後にクッキーが削除される。
Cookies.get('name') // => 'value'
Cookies.remove('name')path: パスを指定
Cookieを保存するパスを示すString。
Default: /
Cookies.set('name', 'value', { path: '' })
Cookies.get('name') // => 'value'
Cookies.remove('name', { path: '' })domain: ドメインを指定
クッキーが保存される有効なドメインを示す文字列。クッキーはすべてのサブドメインにも保存されます。
Default: クッキーは、Internet Explorer（下記参照）を除き、クッキーが作成されたページのドメインまたはサブドメインに保存されます。
Cookies.set('name', 'value', { domain: 'subdomain.sample.com' })
Cookies.get('name') // => undefined ※subdomain.undefined.com'で読み取る必要がありますsecure:セキュア
trueまたはfalseのどちらかで、クッキー送信に安全なプロトコル(https)が必要かどうかを示します。
デフォルトは セキュアプロトコルを要求しない。
Cookies.set('name', 'value', { secure: true })
Cookies.get('name') // => 'value'
Cookies.remove('name')sameSite: 同一サイト
ブラウザがクロスサイトリクエストとともにクッキーを送信するかどうかを制御するための文字列。
Default: 設定されていません。
最近のブラウザは、ここで何も指定しなくても “Lax” をデフォルト値としていることに注意してください。
Cookies.set('name', 'value', { sameSite: 'strict' })
Cookies.get('name') // => 'value'
Cookies.remove('name')Cookies.set('name', 'value', { sameSite: 'strict' })
Cookies.get('name') // => '値'.
Cookies.remove('name')デフォルトの設定
const api = Cookies.withAttributes({ path: '/', domain: '.example.com' })この記事を読んだ人におすすめの書籍
デモ
最近色々なサイトで見るCookie同意のポップアップを表示するサンプルを作成します。
1.ファイルを読み込む
js.cookie.min.jsファイルを読み込ませる。
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script src="path/to/js.cookie.min.js"></script>
</body>
</html>2.Cookie同意のポップアップ表示部分をhtml.cssにて作成
Cookie同意のポップアップ部分のhtml
<div id="js-cookies" class="l-cookies">
<div class="l-cookies_body">
<p class="l-cookies_ttl">私たちのクッキーポリシー</p>
<p class="l-cookies_txt">当サイトでは、快適なウェブ閲覧のためにクッキーを利用しています。 <br />「同意」ボタンをクリックするとこのメッセージは表示されなくなります。</p>
<div class="l-cookies_btn">
<a href="#" id="js-cookies-agree">同意</a>
</div>
</div>
</div>3.Cookieの設定
サイトアクセス時のクッキーの取得、設定。
以下の仕様で作成。
- name(クッキー名) : agreement
- value(値) : saved
- expires(有効期限) : 1
<script>
// サイト読み込み(DOM)が完了した時
document.addEventListener("DOMContentLoaded",function(){
const cookie = Cookies.get('agreement'); // agreementという名前のクッキーを作成
const elmCookies = document.getElementById('js-cookies'); // Cookie同意のポップアップを取得
// 作成したagreementという名前のクッキーの値がsaved(保存済み)のとき
if(cookie == "saved"){
// Cookie同意のポップアップを非表示
elmCookies.remove();
// 作成したagreementという名前のクッキーが保存されていない時
} else {
// Cookie同意のポップアップを出す
const cookiesTrigger = document.querySelector('#js-cookies-agree');
console.log(cookiesTrigger)
// 更に同意をクリックしたときに、value(値)を'saved'、expiresを30に設定してクッキーを保存する
cookiesTrigger.addEventListener('click',function(event){
elmCookies.classList.toggle('_is-agree'); // Cookie同意のポップアップにclassを追加
Cookies.set('agreement', 'saved', { expires: 1 }); // agreementのクッキー値にagree, 有効期限を30日に設定して保存
});
}
}, false);
</script>さいごに
基本とデモひとつしか説明してないですが他にも活用のアイデアが膨らみますね。
この記事を読んだ人におすすめの書籍
