react-cookieでクッキーを管理してみた#React若槻龍太2021.09.05この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。IoT事業部の若槻です。react-cookieを使用すると、Reactアプリにクッキー管理機能を簡単に実装することができます。npm今回は、react-cookieでReactアプリにクッキー管理機能を実装して動作を確認してみました。デモ下記のCodeSandboxのサンドボックス環境にデモをデプロイしています。URLを別タブで開きます。https://976vb.csb.app/下記のような画面が開きます。クッキーの新規作成テキストフィールドに適当な値を入力し、[保存]をクリックします。すると入力した値が976vb.csb.appドメインのクッキーとしてブラウザに保存されます。[現在の値]にはクッキーに保存されている現在の値が表示されます。保存時にURLのnameパラメータに現在の値が追加されます。EditThisCookieでブラウザに保存されたクッキーを確認してみると、976vb.csb.appドメインのクッキーとして入力した値aaaが追加されていることが確認できます。https://976vb.csb.app/をブラウザで再度開いても、保存されたクッキーがちゃんと取得されて[現在の値]に表示されます。クッキーの更新テキストフィールドに現在と異なる値を入力し、[保存]をクリックします。現在の値とnameパラメータが更新されました。保存されているクッキーの値も更新されています。クッキーの削除[削除]をクリックします。クッキーの値が現在の値とnameパラメータから削除されました。保存されているクッキーの値も削除されています。);};<CookiesProvider>を使用してreact-cookieによりクッキーが管理される範囲を指定します。hooksを使用して、クッキーの値の取得、設定、削除を行えるようにしています。cookiesは、現在のすべてのクッキーが含まれるJavaScriptオブジェクトです。キーがクッキー名(nameなど)となります。[options])のように使用して指定のクッキーの値を設定します。optionsにはRFC6265に準じたクッキーオプション(ドメイン、パス、有効期限、SameSiteなど)を指定できます。[options])のように使用して指定のクッキーを削除します。