概要
バイト先のアプリ開発でデータを一時的に保存したいのですが、LocalStorageだと
なぜか動作しないという問題がありました。
そこで、LocalStorageのように半永久的に残るものではなく
期限付きで削除してくれるものを使いたいなぁとCookieを思い出したので使ってみました🔥
使い方
大まかな流れ
大体はLocalStorageを利用する時と同じです。
若干Cookieの特徴があるので、そこだけ使い方が変わるイメージになります！
Cookieに保存する時
- JSONに変換
- Cookieにセット
- 期限、パスなどの設定
JSONに変換しない場合、[object Object]といった謎の形式になってしまい
オブジェクト形式のデータを読み込めなくなるためです。
（valueに複数の値がセットされている場合に “.” で繋ぐことにより値を取得できる性質を利用）
Cookieから読み出す時
- Cookieから読み込み
-
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 "をデフォルト値としているものが増えています
参考文献