Javascript 使用“浏览器后退”按钮保留页面状态以便重新访问
我有一个页面,可以根据用户按下按钮动态加载内容:Javascript 使用“浏览器后退”按钮保留页面状态以便重新访问,javascript,jquery,ajax,playframework,browser-history,Javascript,Jquery,Ajax,Playframework,Browser History,我有一个页面,可以根据用户按下按钮动态加载内容: ${document).ready(function) { $("#myButton").click(function() { $("#dynamicDiv").load("www.example.com"); }); } 动态内容运行良好,我可以全天获取页面。但是,当您跟随链接到另一个页面,然后按“浏览器返回”按钮返回到该页面后,该页面将完全重置,就好像从未加载过动态内容一样 我发誓我以前见过不同的行为
${document).ready(function)
{
$("#myButton").click(function()
{
$("#dynamicDiv").load("www.example.com");
});
}
动态内容运行良好,我可以全天获取页面。但是,当您跟随链接到另一个页面,然后按“浏览器返回”按钮返回到该页面后,该页面将完全重置,就好像从未加载过动态内容一样
我发誓我以前见过不同的行为,但也许我疯了。浏览器不应该保留页面的状态,而不是重新呈现页面吗
编辑:
顺便说一句,我在玩!框架,如果这与此有任何关系。浏览器将在第一次收到页面时加载该页面。通过javascript进行的任何DOM修改都不会被保留 如果你想保留修改,你必须做一些额外的工作。修改DOM后,使用标识符更新url哈希,稍后可以解析并重新创建修改。无论何时加载页面,都需要检查是否存在哈希,并根据标识符进行DOM修改
例如,如果动态显示用户信息。每次显示一个url时,您都会将url哈希更改为以下内容:“#/user/john”。无论何时加载页面,都需要检查哈希值是否存在(window.location.hash),对其进行解析,然后加载用户信息。实现浏览器返回功能很困难。 使用jquery.history.js这样的插件会更容易
epignosisx和马尔科姆都是对的。它也被称为“深度链接”。我们在最近的一个Play应用程序中使用JQuery地址插件来处理这个问题
我使用的一种技术是将状态序列化为JSON,将其存储在哈希字符串中,然后在导航回页面时将其读回。这已经在IE10+、Firefox和Chrome中进行了测试 例如:
// On state change or at least before navigating away from the page, serialize and encode the state
// data you want to retain into the hash string
window.location.hash = encodeURIComponent(JSON.stringify(myData));
// If navigating away using Javascript, be sure to use window.location.href over window.location.replace
window.location.href = '/another-page-url'
....
// On page load (e.g. in an init function), if there is data in the #hash, overwrite initial state data
// by decoding and parsing the JSON string
if (window.location.hash) {
// Read the hash string omitting the # prefix
var hashJson = window.location.hash.substring(1);
// Restore the deserialized data to memory
myData = JSON.parse(decodeURIComponent(hashJson));
}
你会认为,对于这样一个基本的需求,它的工作方式会有点不同。我想知道HTML5是否为我们准备了不同的东西……饼干是另一种可能性。您可以在JavaScript中设置会话cookie。这一切都很好,但实际上如何解析和加载“用户”信息呢?