在浏览器中更新页面后动态插入的页面内容消失[关闭]答案

【问题标题】：After updating a page in the browser dynamically inserted page content disappears [closed]在浏览器中更新页面后动态插入的页面内容消失[关闭]
【发布时间】：2013-11-28 23:43:47
【问题描述】：

我用JQM开发了一个HTML5 webapp，我想实现的是在页面之后动态添加页面内容（上一页有一个按钮，在点击后执行JS函数和这个脚本生成内容）刷新此内容不会消失但会保留。

如果这是不可能的，我应该将脚本绑定到哪个事件，该脚本将再次生成内容并将其放入此页面？如果这个问题是重复的，请参考我的答案。几天以来我一直在尝试这样做，但仍然没有成功。任何建议将不胜感激！

【问题讨论】：

请不要在你的问题中发誓。
对不起！不会再发生了。

标签： javascript jquery html jquery-mobile dom

【解决方案1】：

当页面刷新时，任何客户端上下文都消失。将页面本身和其中的所有 JavaScript 视为应用程序本身。刷新页面相当于关闭并重新打开应用程序。

鉴于此，在该页面中创建的任何需要在下次加载页面时可用的上下文或状态都需要保存在某个地方。有很多地方可以做到这一点。例如：

服务器端代码
Cookie
本地存储

鉴于您的开发主要讨论的是 HTML5 和 JavaScript，在这种情况下，本地存储可能是您的最佳选择。 a handy guide here 可以帮助您入门，尽管在 Google 上快速搜索“HTML5 本地存储”会发现更多信息。基本上你需要做的是：

定义一些代表您希望在页面加载之间保存的状态的数据
只要状态发生变化，就将数据写入本地存储
在页面加载时从本地存储读取该数据（因为您特别要求事件，文档的“就绪”事件可能是您想要的，就像大多数其他 jQuery 代码一样）并从该数据

【讨论】：

非常感谢你，大卫！这是一个非常有用的答案。
文档的“就绪”事件是否也适用于单页应用程序？我通过#导航到页面，例如。 G。 file:///C/exampleproject/index.html#page1
@busuzima：可能，如果不看上下文就很难说。文档的就绪事件是文档结构完整且可用的时间，因此任何before 事件都需要仔细考虑，因为您可能会在文档继续构建时遇到问题。如果对于界面的某些方面，您需要等到特定引用的内容也被加载（例如图像），那么稍后的事件可能会更好。不过，document.ready 是一个不错的起点。
我还要学习一件事。单击按钮并导航到包含生成内容的页面后，它就在那里，一切都很好，但是在我点击浏览器的“返回”按钮然后再次单击该按钮后，我当然会移动到我想要的页面并且内容出现两次。我读到数据存储在内存中，但是如何防止多次生成相同的内容？我应该使用“if”语句吗？
@busuzima：如果没有更多的上下文和代码来重现问题，我无法回答，因为有很多事情可能会影响它。听起来这应该是它自己的堆栈溢出问题。