Cookieが保存されなくなった

ある日突然、Cookieが保存されなくなった。
それを発見したときは、あーなんか追加したし、そのへんでミスがあったんだろうな〜と思ったが、、
どんなに差分確認しても、どこもCookieに関する部分を触っていない・・・
なぜ・・・？

（一瞬、ついにその時が来たのか・・とも思いましたが、保存されているものもあったり、開発環境は保存されないが、本番環境は保存されていたので、なんかしら原因があることは確定していました。）

と、結構時間掛けて原因わかりませんでしたが、原因は保存容量のオーバーでした。

参考
https://qiita.com/pipiox/items/95554673ba3b078ac112
https://ageo-soft.info/knowhow/112/

上の記事は、最近何回も見ていたので、（Cookie使わないように書き換えなきゃな〜と色々調べていました。）
なぜピンとこなかったんだろうと、自分でも思いましたが、
なぜ、すぐに気づけなかったかを説明します。

Cookieの保存容量は最大4KB

え、少な！！と思うかもしれませんが、Cookieに保存するのは文字列なので、4KB超えるほど使っているかどうかなんて意識していませんでした。

URLエンコードされる

保存できなくなったCookieに保存していたのはjsonをstringifyしたものでしたが、保存前の文字数を確認しても、4KB超えそうなものではありませんでした。
Cookieに保存できている環境で、ChromeのDevToolsのCookieを確認したら、あ！ValueがURLエンコードされている！！
コピーして確認したら、4000文字超えている！！！
なんと！今までがギリギリで生きていたようでした(ﾟдﾟ)

容量オーバーしてもエラーはでない

なぜ、なかなかこれに辿りつけなかったのかというと、どこにもエラーが出ていなかったから。
コンソールエラーが出るわけでもなく、途中までが保存され、呼び出した時にエラーになるわけでもなく、ただただ保存されませんでした。

たまたま、同じボタンを押下したタイミングで、2つのCookieを保存していました。
1つは保存されるのに、もう1つは保存されない。なんで？？？
本当に不思議でした。

対応方法

原因を調べても、容量オーバーの可能性を説明しているものがほとんどなかったので書こうと思いましたが、このままではただの愚痴を言っているだけになってしまいそうなので、私の対応方法を載せます。

Cookie -> Local Storage

もともと、Cookieで書かれているものを別の方法で置き換える予定でした。
Nuxt.jsで開発をしているので、StoreかLocal Storageかなーと。
一部は、もう上記のどちらかになっているものもありますが、時間に追われていたので、とりあえずLocal Storage（保存容量：5MB～10MB）にすれば解決することはわかっていたので、Local Storageに置き換えました。

cookie-universal-nuxtを使っていました。

this.$cookies.set("cookie-name", "cookie-value", {
  path: "/",
  maxAge: 60 * 60 * 24 * 7
});

const cookieRes = this.$cookies.get("cookie-name");

this.$cookies.remove("cookie-name");

Vue.jsでよく使われているのはvue-cookieでしょうか？

this.$cookie.set("cookie-name", "cookie-value", 7);
 
this.$cookie.get("cookie-name");
 
this.$cookie.delete("cookie-name");

Local Storageはプラグインじゃなくていいと思います。

localStorage.setItem('local-storage-name', 'local-storage-value');

const localStorageRes = localStorage.getItem("local-storage-name");

localStorage.removeItem("local-storage-name");

ほぼほぼ一括置換で完了できると思います。

注意点としては、cookie-universal-nuxtは data で get できましたが、Local Storageは data で getItem できないので、 mounted などに記述する必要があります。