JavaScriptでCookieの追加・削除の操作は誤解が多い

Cookieの追加・削除の操作は誤解が多い

JavaScriptでCookieの追加や削除する方法を検索すると、色々な方法が検索結果に表示されます。

localStorageだと追加はsetItem、削除はremoveItemなので、すぐに理解できますが、Cookieは色々な方法がネット上にあるので、JavaScript初心者だと処理方法を誤解して間違いやすいです。

この記事ではJavaScriptが得意でない人によくあるCookieの誤解についてまとめました。

Chromeで保存されたCookieを確認するには、Applicationを選択してCookiesを見ます。

確認だけでなく、Cookieの追加や削除もここからできます。

Cookieを追加・削除できるサンプルページを用意しましたので、実際に追加と削除がどのように反映されるか確認すると良いでしょう。

localStorageだと、例えば以下のコードのように「setItem('foo', 1)」のあとに「setItem('foo', 2)」の処理が実行されたら、上書きされて「'foo', 2」がlocalStorageに保存されます。

localStorage.setItem('foo', 1)
localStorage.setItem('foo', 2)

しかし、Cookieの場合は保存先の「path」が異なり、ディレクトリ構造が親子関係の位置である場合は同名のCookieを保存可能です。

※ pathが '/' と '/foo' のように異なる場合。

JavaScriptでCookieを削除するにはexpireで過去の日時を指定すると書かれていることがよくあります。

document.cookie = 'cookieName=; expires=Thu, 01 Jan 1970 00:00:00 GMT'

しかし、Cookieの削除はexpiresに過去の日時を指定するのではなく、max-age (最大存続時間) を「0」にすることでも同様に削除できます。

document.cookie = 'cookieName=; max-age=0'

コードが短いほうが見やすいし、記述ミスも少ないので、削除する際は「max-age=0」を使ったほうが良いです。

サンプルページのCookie削除は後者の「max-age=0」を使う方法で実装しています。

前述のJavaScriptでCookieを削除するコードを書いてもCookieが削除されないことがあります。

document.cookie = 'cookieName=; max-age=0'

Cookieは設定されたパスとドメインに基づいて管理されます。

Cookieを削除する際には、そのCookieが設定されたのと同じパスとドメインを指定する必要があります。もしパスやドメインが異なる場合、Cookieは削除されません。

example.com/foo/ ではpathを省略していると「/foo」のCookieしか削除できないのです。

例えば example.com/foo/ で読み込んだページのJavaScriptで pathが「/」のCookieを削除する場合は以下のようにpathを指定する必要があります。

document.cookie = 'cookieName=; max-age=0; path=/'

ちなみにCookie名のところの「=」を以下のように付け忘れてCookieの処理が動作しないケースもあるので注意が必要です。

document.cookie = 'cookieName; max-age=0'

まれにCookieへのアクセス制限でアクセスできないこともあります。

GoogleでJavaScriptのCookieの追加・削除の方法を検索するとCookie Store APIを使用した方法が検索結果に表示されることがあります。

これを使うとChromeでCookieの追加・削除ができます。

cookieStore.set({
  name: 'foo',
  value: '1',
})

cookieStore.delete('cookie1')

しかし、Cookie Store APIはChromeでは使えますがSafariとFirefoxでは使用できません。

そのため、Webサイトには絶対に使用しないでください。