今日は別サイトでお気に入り機能を実装していたところ、とあるエラーに頭を抱えた。

1. localStorageのBookmarkというItemに5件の記事がJSON型データで入っている。
2. 新しい記事を1件追加し、localStorageには6件になる。
3. ブラウザで戻る
4. 戻り先の、既にBookmark済みの記事を、Bookmark解除ボタンを押す。
5. するとlocalStorageには4件になる。

なぜならlocalStorageには確かに戻った時点で6件だが、JavaScriptの変数は保持されてしまうため、戻った時、JavaScriptのBookmarkという変数には5件の状態になるのだ。

そこで1件削除すると5件が4件になり、その4件のデータをセットしてしまうため、一気に2件削除されてしまうのだ。

解決方法は至って簡単で変数の宣言を、ボタンクリック時にすればよいだけだ。

大雑把に解説

修正後

変数tinpoを外側に入れておけば、別の処理で簡単にアクセスできるが、クリックメソッド内に入れてしまうとまた同じように変数宣言しなければならない。ナンセンスだが背に腹はかえられないのだ。

喫茶店で放送禁止用語をぺちゃくちゃ喋る変態の二人がいたら10中8九エロ漫画家とその編集担当であるという。