JavaScript クッキー操作できるjs-cookie使ってみた

インストール

# 1. ダウンロードして使う

GitHub からスクリプトをダウンロードしてスクリプトタグで読み込む

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

# 2. CDNを使う

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

# 3. NPMでインストール

npm

$ npm install js-cookie --save

yarn

$ yarn add js-cookie

読み込み

import Cookies from 'js-cookie';

使い方

Cookieを保存

Cookies.set('cookie_name', 'value')

Cookies.set('idol', '星宮いちご');

期限付きのCookieを保存
Cookies.set('cookie_name', 'value', { expires: 1 })
オプションにexpiresキーワードで保存。期限のexpiresの単位は「日数」
e.g. 1週間なら { expires: 7 } 12時間なら { expires: 1/2 }

Cookies.set('one_day_idol', '紫吹蘭', {expires: 1});

パスを指定してCookieを保存
Cookies.set('cookie_name', 'value', { path: '' }) オプションにpathキーワードでパスを渡す。パスの指定があると、そのパスは以下でのみCookieが有効になる。{path: ''}とすると現在のページ配下で有効

Cookies.set('current_idol', '霧矢あおい', {path: ''});

Cookieを取得

Cookies.get('cookie_name')

const idol = Cookies.get('idol');
console.log(idol); // => 星宮いちご

Cookieが存在しない場合はundefinedを返す

const idol = Cookies.get('legend_idol');
console.log(idol); //=> undefined

Cookie名を指定しないCookies.get() で保存されているCookieを{name, value}形式のオブジェクトで取得できる ※ 取得できるものだけ

Cookies.get();
// => {idol: '星宮いちご', ,current_idol: '霧矢あおい', one_day_idol: '紫吹蘭'}

Cookieの削除

Cookie.remove('cookie_name')

Cookies.set('idle', '星宮いちご');
Cookies.remove('idle');
console.log( Cookies.get('idle') ); // => undefined

パス付きのCookieはパスが合ってないと削除できない。※ 有効なパスに居るればパス指定なしでも削除できるっぽい

Cookies.set('current_idol', '霧矢あおい', { path: '/cool' });
Cookies.remove('current_idol');
console.log( Cookies.get('current_idol') ); // => 霧矢あおい
Cookies.remove('current_idol', { path: '/cool' });
console.log( Cookies.get('current_idol') ); // => undefined

　
簡単にCookieを操作することができました！

Cookieの有効期限をあまり短い期間で指定することって無いのかもだけど、js-cookieは日数がデフォルトなので1日以下にしたい時、1時間なら1/24 = 0.0416666....、30分なら1/( 24 * 2 ) = 0.0208333...という具合に値が少数になってしまいます。
直接値を指定するなら近い数字にすれば良いと思いますが、小数点を含む計算式だと誤差(IEEE754)が出る可能性もありますので注意が必要かなーって思いました。
Floot値にもなるから個人的には、殆どの場合intで指定できるPHPのsetcookieみたいに秒数指定の方が良かったのではないか説。

[参考]