js-cookieの使い方【備忘録】

概要

バイト先のアプリ開発でデータを一時的に保存したいのですが、LocalStorageだと
なぜか動作しないという問題がありました。
そこで、LocalStorageのように半永久的に残るものではなく
期限付きで削除してくれるものを使いたいなぁとCookieを思い出したので使ってみました🔥

使い方

大まかな流れ

大体はLocalStorageを利用する時と同じです。
若干Cookieの特徴があるので、そこだけ使い方が変わるイメージになります！

Cookieに保存する時

1. JSONに変換
2. Cookieにセット
   1. 期限、パスなどの設定

JSONに変換しない場合、[object Object]といった謎の形式になってしまい
オブジェクト形式のデータを読み込めなくなるためです。
（valueに複数の値がセットされている場合に “.” で繋ぐことにより値を取得できる性質を利用）

Cookieから読み出す時

1. Cookieから読み込み
2. JSON.parseで変換

ライブラリの導入

インストールは以下のように行います。

# npm
npm i js-cookie

# yarn
yarn add js-cookie

TypeScript

TSを使っている方はこちらまで実行しましょう。

# npm
npm i --save-dev @types/js-cookie
# yarn
yarn add -D @types/js-cookie

Cookieに保存

まず、JSONに変換します

const jsonData = JSON.stringify(value)

次にCookieにセットします。

Cookies.set(key, jsonData)

Default: Cookie is removed when the user closes the browser.
Githubより引用

expiresオプションを指定しない場合、-1の値がセットされる仕様で、
ブラウザを閉じた時に使えなくなるので、ブラウザを閉じた後でも使えるようにしたい場合は
expiresオプションを指定する必要があります。

オプション

オプションはオブジェクトで定義されており
以下のような形式で利用できます。

const options = {}
Cookies.set('name', 'value', options)

expires：有効期限

デフォルト値は-1で、利用したい日数で指定できます。
今回は1日だけ有効にしたいので、1としました。

Cookies.set('name', 'value', { expires: 1 })

path：サイトのパス

デフォルト値は/でサイト全体で有効です。
/postでのみ有効にしたい場合は以下のように指定します。
また、下手なパスのCookie読み込みを許容しなくなるため、XSS攻撃の対策に有効です。

Cookies.set('name', 'value', { path: '/post' })

ファイルの拡張子を含むパスは設定できないとあるため、/post/index.htmlの
ようなパスは設定できないことに注意してください。

This means one cannot set a path using window.location.pathname in case such pathname contains a filename like so: /check.html (or at least, such cookie cannot be read correctly).
引用元：Github

その他に、domain, secure, sameSiteがありますが、少し長くなるので、
気になる方は本記事の下の方を見ていただけると助かります🙏

Cookieから読み出す

以下のように使うことで、Cookieから取得できます。

const data = Cookies.get(key)
return JSON.parse(data)

その他

言語設定

Cookieの言語設定は以下のように設定できます。
今回は日本語を指定しています。

Cookies.set('locale', 'ja-JP')

オプション

domain

デフォルトでは、Internet Explorer（下記参照）を除き、
クッキーが作成されたページのドメインまたはサブドメインにのみ表示されます。
例として、site.comでドメインをセットすると、以下のようになります。

Cookies.set('name', 'value', { domain: 'subdomain.site.com' })

secure

デフォルトでは、セキュアなプロトコルを必要としない（＝HTTPSでなくても動作する）設定で
true or falseで指定します。

Cookies.set('name', 'value', { secure: true })

sameSite

デフォルトでは特に指定されておらず、
ブラウザがクロスサイトリクエストと一緒にクッキーを送信するかどうかを
制御できるようになるオプションです。

Cookies.set('name', 'value', { sameSite: 'strict' })

sameSite属性についてはこちらを見ると良いと思います！

最近のブラウザでは、何も指定しなくても、"Lax "をデフォルト値としているものが増えています

参考文献