Javascript （临时）在Web应用程序中存储JSON搜索结果

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

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

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

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

---

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

解决这个问题有两种方法，一种是在服务器上缓存结果并按需填充视图，第二种方法与前面提到的方法相同-使用会话存储。sessionStorage（IMO）有一个非常简单的API。您可以使用sessionStorage.setItem（键，值）或sessionStorage.getItem（键）——也可以使用其他方法，如sessionStorage.key（索引）、sessionStorage.removeItem（键）和sessionStorage.clear（）。包含用于会话存储的跨浏览器polyfill解决方案可能会很有用，您可以查看Modernizer上的“Web存储”polyfill部分：---玩得开心：-/

解决此问题有两种方法，一种是在服务器上缓存结果并按需填充视图，第二点和前面提到的一样——使用sessionStorage。sessionStorage（IMO）有一个非常简单的API。您可以使用sessionStorage.setItem（键，值）或sessionStorage.getItem（键）——也可以使用其他方法，如sessionStorage.key（索引）、sessionStorage.removeItem（键）和sessionStorage.clear（）。包含用于会话存储的跨浏览器polyfill解决方案可能会很有用，您可以查看Modernizer:--玩得开心：-/

上的“Web存储”polyfill部分：

每次用户搜索时，将url中的哈希值更改为唯一的字符串（例如“search-{userInput}”……您当然可以忘记“search-”，但我喜欢用pretty表示的url）。这应该给你回按钮支持。然后：

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

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

---

您可能需要找到一些方法来绕过缺少的浏览器支持，至少是hashChange事件、JSON stringify/parse和LocalStorage，但我乐观地认为，到目前为止，已经有足够的libs/插件了

在我的头顶上：

每次用户搜索时，将url中的哈希值更改为唯一的字符串（例如“search-{userInput}”……您当然可以忘记“search-”，但我喜欢用pretty表示的url）。这应该给你回按钮支持。然后：

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

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

---

您可能需要找到一些方法来绕过缺少的浏览器支持，至少是hashChange事件、JSON stringify/parse和LocalStorage，但我乐观地认为，到目前为止，已经有足够的libs/插件了

是一个很好的用于持久性API的小库。您可以使用相同的语法作为不同存储选项的抽象

是一个很好的持久化API小库。您可以使用相同的语法作为不同存储选项的抽象：您认为太复杂了：您的搜索表单很可能不会更改url！使用GET而不是POST，您将获得所需的结果。目前，浏览器无法知道要显示的网站状态，默认情况下会显示第一个状态-空搜索表单

---

可以按照建议添加缓存，但这并不是问题所在

您认为太复杂了：您的搜索表单很可能不会更改url！使用