JavaScriptでクッキーを使用するならjs-cookieライブラリが便利

JavaScriptのcookieは扱いが面倒

JavaScriptでcookieを扱いたい場合はdocument.cookieを使用することになるが、使い方にクセがあるため扱うのに手間がかかる。

例えばtestという名前のサンプルクッキーも値を取得したい場合はdocument.cookieをsplit('; ')で分割してfindで'test'を検出後、さらにsplit('=')[1]で分割して値を取得しなければならない。

document.cookie = 'test=Hello'
const cookieValue = document.cookie
  .split('; ')
  .find(row => row.startsWith('test'))
  .split('=')[1]
function alertCookieValue() {
  alert(cookieValue)
  // => Hello
}

js-cookieライブラリの使い方

js-cookieのCDNがあるので、以下のコードをHTMLファイル内に貼り付けて読み込む。

※ npmでインストールする場合は「npm i js-cookie」

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

次に設定だがCookies.set('test', 'Hello')のように名前と値を設定するだけだ。

取得はCookies.get('test')なので前述のdocument.cookieを使用したコードは以下のように短く記述することができる。

Cookies.set('test', 'Hello')
function alertCookieValue() {
  alert(Cookies.get('test'))
  // => Hello
}

あとjs-cookieは期限の設定は第3引数に{expires: 1}のように日数を数値で設定するだけで済む。

ちなみに1時間の場合は{expires: 1/24}となる。

Cookies.set('test', 'Hello', {expires: 1})
function alertCookieValue() {
  alert(Cookies.get('test'))
  // => Hello
}

pathでcookieを使用するページを指定

第3引数に{path: '/foo'}のように書けばcookieを使用するページを指定できる。

このように書くとiwb.jp/foo/ではCookieを保存するがiwb.jp/bar/では保存しないようにできる。

Cookies.set('test', 'Hello', {path: '/foo'})

cookieの削除

Cookies.remove('test')で削除できる。

ただし、例えばiwb.jp/bar/にいるときにiwb.jp/foo/のcookieを削除する場合は以下のようにpathの指定も必要。

Cookies.remove('test', { path: '/foo' })