今日遭遇したこの問題があります。私はウェブサイト用のミニカートを作成しています。実際のカートを除くすべてのページに表示されます。
サイトでのパフォーマンスは重要なので、カート内の現在のアイテムを一時的にローカル ストレージにキャッシュして、ページが読み込まれるたびに同じアイテムをフェッチするというサーバー側の不要なリクエストを回避することにしました。
ミニ カートは実際にはカートに表示されないため、アイテムを削除するときなど、コールバックをリッスンします。ポイントは、キャッシュをリセットするか、キャッシュされたコピーからそのアイテムだけを削除することです。
私が直面している問題:
ユーザーはカートページに行き着き、リンクをクリックして他のページに移動するとキャッシュがクリアされる可能性があります(ユーザーが最後のステップにいる場合)。キャッシュはクリアされます。
問題は、戻るボタン (ブラウザの戻るボタン、マウスの戻るボタンなど) を使用すると、ユーザーが前のページに戻り、カート ページで行った変更 (キャッシュのクリア) が元に戻されることです。(ページをリロードしても)
質問は次のとおりです。
ローカル ストレージをクリアし、戻ったときに復元されないようにするにはどうすればよいですか? 同時に、他のブラウザでも一貫した動作をします。
これcache
は単なるアイテムですが、新しいアイテムが追加または削除されると更新されます。キャッシュをクリアすると、単純に削除されます (localStorage.removeItem を使用)。