JavaScriptで簡単にCookie操作ができるライブラリ「js-cookie」

いままでCookieの操作には特に何も考えず昔から使っているjquery-cookieを使用していたのですが、jQueryが必須になるのと、プロジェクトもかなり昔にjs-cookieという別のプロジェクトに移行されているので、そちらを使うようになりました。

「jQuery Cookie」などで検索すると、jquery-cookieが引っかかりますが、jQueryを使う場合もjs-cookieを使用した方がよさそうです。

js-cookieのインストール

ダウンロードして使う場合

GitHubからjs.cookie.jsをダウンロードしてきて、読み込めばOKです。

<script src="/common/js/js.cookie.js"></script>

CDNの場合

CDNを使う場合は、jsDelivrが用意されています。

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

npmインストールの場合

npmでインストールしたい場合は下記コマンドでインストールできます。

$npm i js-cookie -D

yarnの場合は下記コマンドです。

$yarn add js-cookie

インストールできたらjsファイル内でインポートします。

import Cookies from 'js-cookie';

Cookieの操作方法

Cookieの操作方法は主に下記の3つです。

• Cookieの保存
• Cookieの取得
• Cookieの削除

Cookieの保存

Cookieを保存する場合は、Cookies.set()でCookieの名前と値を渡します（Cookiesが複数形で「s」が付いているので注意）。

Cookies.set('name', '値');

また、第3引数でオプションを設定できて、期限付きのCookieとして保存したり、特定のパス配下でのみ有効なCookieとして保存できます。

Cookies.set('name', '値', {expires: 1, path: ''});

expiresが期限で単位は「日」になります。
1と設定すれば1日になりますし、10と設定すれば10日、1/2と入力すれば12時間となります。

pathはCookieを有効にするページのパスを渡して使います。
ちなみに、path: ''として空文字を渡すと、現在のページでのみ有効なCookieになります。

Cookieの取得

Cookieを取得する場合は、Cookies.get()でCookieの名前を渡せば取得できます。

let getName = Cookies.get('name');

Cookieの削除

Cookieを削除する場合は、Cookies.remove()でCookieの名前を渡せば削除できます。

Cookies.remove('name');

オブジェクト形式でCookieを保存・取得する方法

2020年11月現在最新のバージョンのv3.0.0ではエラーが出て使えないのですが、v2.2.1であれば使えた方法です。
（今後エラーが修正されて使える可能性もありますが、うまくいかない場合はバージョンをご確認ください）

オブジェクト形式でCookieの保存

オブジェクト形式で保存する場合は、Cookies.set()の値にオブジェクトをセットするだけでOKです。

let data = {
  id: 1,
  name: 'test',
  text: 'sample',
}
Cookies.set('jsonName', data);

オブジェクト形式のCookieを取得

オブジェクトを取得するときは、通常の方法だと取得できないので、Cookies.getJSON()を使用します。

let getJsonName = Cookies.getJSON('jsonName')