2

我正在为我的 Web 应用程序（仅限 HTML、JS 和 CSS）开发搜索功能。我正在使用 jQuery 的 .getjson() 方法从提要中检索数据并将这些结果显示在页面上。在 .each() 语句中，我将 HTML 标记添加到结果中，使一些元素链接到外部源。

问题是当访问者在我的 Web 应用程序上启动搜索并单击从结果到外部页面的链接，然后使用浏览器上的后退按钮返回结果页面时，所有搜索结果都被清除并需要启动另一个搜索。

我想暂时保存搜索结果，因此如果用户单击结果中的链接，然后按“返回”按钮返回应用程序，则所有结果都将可用，而无需新的搜索。

更进一步，如果过去搜索的结果仍然存在，那么如果访问者继续按“后退”按钮，他们可以看到所有以前的搜索（当然有给定的限制），这也很酷。

HTML5 sessionStorage 似乎很适合这个，但我发现的信息指向一个乏味的编码解决方案。我不能将所有 json 结果保存为 JS 对象，并在访问者按下后退按钮时由我的每个语句重新呈现它们吗？我绝对愿意使用代码库或插件来解决这个问题。

4

4 回答 4

0

您有两种方法可以解决此问题，一种是将结果缓存在您的服务器上并按需填充视图，第二种方法就像您之前提到的那样 - 使用 sessionStorage。sessionStorage (IMO) 有一个非常简单的 API。您可以使用 sessionStorage.setItem(key, value) 或 sessionStorage.getItem(key) - 也可以使用其他方法，例如 sessionStorage.key(index)、sessionStorage.removeItem(key) 和 sessionStorage.clear()。为 sessionStorage 包含一个跨浏览器的 polyfill 解决方案可能会很有用，您可以查看 Modernizr 的“Web Storage”polyfills 部分：https ://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser- Polyfills——玩得开心：-/

于 2012-08-19T19:25:29.667 回答
0

在我的头顶上：

每次用户搜索时，将 url 中的哈希更改为唯一的字符串（例如，'search-{userInput}' ...您当然可以忘记 'search-'，但我喜欢我的 url）。这应该为您提供后退按钮支持。然后：

备选方案 A：监听 hashChange 事件，解析 window.location.hash 并将请求重新发送到您的搜索 URL。从理论上讲，除非在 URL 中添加时间戳或类似的疯狂的东西，否则浏览器的缓存机制应该在这里启动。如果不是，这意味着一个额外的请求，但这应该没问题，不是吗？

备选方案 B：通过将结果缓存到 localStorage 来扩展您现有的搜索查询机制（只是不要忘记预先对其进行 JSON.stringify 并使用 something-{timestamp} 键）。然后监听 hashChange 事件并从你的 localStorage 中提取结果。就个人而言，我不推荐这种解决方案，因为您正在堵塞 localStorage（afaik 某些浏览器的限制为 2.5mB）。

您可能必须想办法避免浏览器缺少对 hashChange 事件、JSON 字符串化/解析和 LocalStorage 的支持，但我乐观地认为现在有足够的库/插件。

于 2012-08-19T19:26:59.550 回答
0

http://brian.io/lawnchair/是一个很好的持久性 API 小库。您可以使用相同的语法作为不同存储选项的抽象http://brian.io/lawnchair/adapters/

于 2012-08-19T20:19:27.920 回答
0

您想得太复杂了：您的搜索表单很可能不会更改 url！使用 GET 而不是 POST，您将获得所需的结果。现在浏览器无法知道您要显示的网站状态，默认情况下显示第一个 - 空搜索表单

可以按照建议添加缓存，但这真的不是问题

于 2012-08-20T07:09:32.057 回答