Question

提前感谢任何试图帮助我的人。

我有一个表单，我要通过appendChild()添加复选框 - 作为用户可供选择的选项 - 基于一系列标准。

当用户选中其中任何一个框，然后点击“继续”按钮将选择内容发布到另一个页面 - 然后点击后退按钮 - 用户选中的复选框 - 现在已被浏览器遗忘（不再检查）。

如果我使用php编写复选框或只是使用静态复选框 - 当用户选中其中任何一个框然后单击“继续”按钮将选择发布到另一个页面时 - 然后点击后退按钮 - 所选复选框记住（仍然选中）

我的问题是：

当我使用 appendChild（）

创建复选框时，为什么浏览器忘记用户所做的选择

但使用静态复选框时，相同的浏览器会记住用户所做的选择

appendChild（）有什么不允许同一个浏览器记住选中的选项？

[div id="mydiv"] here is where the checkboxes are going[div]


[script type="text/javascript"]

var newInput = document.createElement("INPUT");
newInput.id = "mycheckboxid";
newInput.name = "mycheckboxname";
newInput.type = "checkbox";

document.getElementById('mydiv').appendChild(newInput);

[/script]

Answer 1

浏览器可能会忘记＆＃34; DOM的动态更改，因为不同的浏览器使用不同的策略来缓存网页。当您点击后退按钮时，想法是浏览器可以显示其缓存副本，而不是从原始Web服务器重新请求该页面。

它可以（至少）两种方式实现这一目标：

浏览器在离开时缓存页面的DOM本身。重新访问（向前或向后）时，动态变化将持续存在。
浏览器仅在加载时缓存页面的原始HTML（在任何动态更改之前）。这会导致丢失这些动态更改 - 不会记录appendChild()或innerHTML对DOM的进一步修改。

请注意，某些浏览器还会保留已修改的表单数据，而其他浏览器则不会。如果您的目标是在所有浏览器中实现99 +％兼容性，那么您还有一些工作要做。

要解决这个问题，你需要以某种方式坚持这个状态。您有几个选择：

将有关页面修改的数据保存到localstorage。使用在首页加载时随机生成的密钥，然后保留在页面中，以便状态更改仅适用于该页面的实例。在页面加载时，如果此键已存在，请读取更改数据并重新应用更改。较旧的浏览器不支持本地存储。
使用cookies做先前的事情。我不推荐这个，因为它有扩散cookie的缺点。 Cookie会在每个请求中发送和接收（包括ajax请求），因此您会在每次请求时膨胀传输的数据。旧浏览器可以正常使用。
放弃您的动态更改模型，并通过发布到服务器进行更改。然后，当从浏览器的缓存中提取时，页面将包含修改后的html。你可能不想要这个，但我想我会指出它的完整性＆＃39;缘故。
通过幕后的ajax将有关修改的数据保存到服务器。这与实际上对每个更改进行四舍五入不同，就像上一个项目一样。你仍然会动态地进行更改，但是你发布了一个＆＃34; advisement＆＃34;文件到服务器。然后，在每个页面加载时，从服务器请求任何调整数据。这与第一个建议类似，但您使用远程服务器作为存储。这会在每次页面加载时产生额外的净流量，但流量可以是最小的，因为它只是此页面。它还会产生通常不会发送的额外净流量（建议数据）。然而，一个聪明的系统架构可以使用这些信息来保存用户在计算机上的未提交表单数据，并且随着时间的推移可以非常方便（假设您的用户在200个问题的调查中执行了199次然后他的力量消失了 - 通过这个计划，他有机会在他离开的时候无痛地继续下去！）。
让“继续”按钮打开一个新的浏览器窗口，保留原始页面。
使用“继续”按钮发布数据而不离开页面，保持原样不变。你可以做一个简单的灯箱式叠加。
如果灯箱式叠加层不起作用，但您确实需要显示新页面并且不希望它出现在新窗口中，那么请重新设计您的网站以使其与gmail类似：页面只能通过javascript更改，并且只能通过在URL末尾使用#hash标记来控制行为。这可能很困难，但有些库可以实现它。（对于某些浏览器，必须求助于轮询以查看主题标签是否已更改。）基本思路是当您单击指向同一页面但在其上有标记的链接时，例如<a href="#about">About</a>浏览器将启动页面加载事件，并将新的上下文推送到历史记录前进/后退堆栈，但实际上不会加载新页面。然后，您解析哈希代码的更新URL（映射到某种命令）并执行它。通过仔细选择每个链接的正确哈希码，您可以通过Javascript动态隐藏和显示相应的页面，并且它看起来好像该人正在真实的网站上导航。你做这一切的原因是，因为页面永远不会加载，你不仅可以在Javascript中维护状态，还可以维护你的DOM状态 - 你只需隐藏用户修改的页面，当后面事件发生意味着再次访问该页面，您显示它，它正是用户离开它的方式。优势：如果您的网站需要使用Javascript进行操作，那么您不会冒险使用更多Javascript来完成它。缺点：完全改变站点的体系结构是很多工作，并且很难在旧版浏览器上工作。要开始使用此功能，请参阅Unique URLs。您可以试用jQuery hashchange plugin。如果您的网站有广泛的分发，您需要确保search engine optimization and web usability issues。您可能希望查看this SO page on detecting back button hash changes。
使用与前一点相同的策略，但不是使用主题标签，而是使用新的HTML5 history.pushState()和history.replaceState()方法 - 请参阅Mozilla browser history。

如果您的目标不是99％使用中的浏览器的99％兼容性，那么请告诉我们您的目标，因为可能有快捷方式。

更新：添加了选项＃8

Answer 2

脚本页面不会停止在状态管理中。它包括国家管理。

这意味着脚本化状态更改，例如脚本化页面转换（内部导航的页面），内容窗格，弹出菜单，样式更改，当然还有表单输入和选择都是脚本编写者的责任。

所以，回答原因......这是因为你没有管理你编写脚本的页面状态。

如果您希望页面按照您的预期工作，您可以管理自己编写脚本的页面状态更改，请使用管理页面的js lib，或者使用您的案例表单，状态或使用http（s）客户端/服务器状态管理并在服务器上加载会话状态，或者只是表单状态，

appendChild（）复选框：记住使用浏览器后退按钮的选择

2 个答案: