# JavaScriptで簡単にCookie操作ができるライブラリ「js-cookie」 URL: https://webrandum.net/js-cookie/ 公開日: 2020-11-14 更新日: 2020-11-14 カテゴリー: コーディングタグ: JavaScript, JavaScriptライブラリ出典: Webrandum（著者: サイトウマサカズ）いままでCookieの操作には特に何も考えず昔から使っている[jquery-cookie](https://github.com/carhartl/jquery-cookie)を使用していたのですが、jQueryが必須になるのと、プロジェクトもかなり昔にjs-cookieという別のプロジェクトに移行されているので、そちらを使うようになりました。「jQuery Cookie」などで検索すると、jquery-cookieが引っかかりますが、jQueryを使う場合もjs-cookieを使用した方がよさそうです。 ## js-cookieのインストール ### ダウンロードして使う場合 GitHubからjs.cookie.jsをダウンロードしてきて、読み込めばOKです。 ``` ``` ### CDNの場合 CDNを使う場合は、jsDelivrが用意されています。 ``` ``` ### 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') ```