按返回后 HTML5 本地存储恢复

Question

我今天遇到了这个问题。我正在为网站制作一个迷你购物车，它将显示在除实际购物车之外的每个页面上。

现场性能很重要，因此我决定将购物车中的当前商品临时缓存在本地存储中，以避免不必要的服务器端请求在每次页面加载时获取相同的商品。

由于迷你购物车实际上并没有显示在购物车上，它仍然会监听回调，例如删除项目时。重点是重置缓存或仅从缓存副本中删除该项目。

---

我遇到的问题:

用户最终进入购物车页面，这可能会清除缓存(如果用户在最后一步)如果我通过单击链接导航到其他页面，它工作正常 - 缓存被清除。

问题是，如果我使用后退按钮(浏览器后退按钮、鼠标后退按钮等)，用户将返回到上一页，并且我在购物车页面(清除缓存)中所做的更改将被还原! (即使我重新加载页面)

那么问题是:

返回时如何清除本地存储并避免恢复？同时在其他浏览器中具有一致的行为。

---

这个缓存只不过是一个项目是本地存储，它会在添加或删除新项目时更新。清除缓存只会将其删除(使用 localStorage.removeItem)。

Answer 1

鉴于在 IE8 中尝试此操作时该项目已被删除，可以肯定地说您正在执行正确的代码来删除该项目。然后我不得不说，这看起来像是与浏览器相关的问题，当您返回以保持一致的用户体验时，浏览器会保留信息。这似乎得到了直接导航到同一链接不会恢复已删除对象这一事实的支持。

如果您正在经历一个像填充购物车这样的过程，这可能无关紧要，只要您留下访问过的页面的回溯痕迹，缓存就会正确更新。 (即缓存中的项目 1 在页面 B 上被删除，返回页面 A 时返回，但在导航到页面 D 时消失)。

您的另一个选择是简单地使用服务器端 session 存储机制。到目前为止，这是我会做的。我看到程序员，尤其是在 SO 上犯的最大错误之一是他们假设操作 X 会影响性能并试图避免它。 如果不进行基准测试，您就无法对性能做出任何具体说明。您的服务器端很有可能在返回几个 session 对象时比客户端代码更快。服务器端 session 是网络上几乎每个站点都在使用的出色工具，如果忽略它会很不幸，因为它错误地假设了它会如何影响性能。