Question

我需要编写一个jQuery向导，它将使用Accordion。它将包括4个步骤。一切都还可以但是有一个要求就是要求“如果用户在第四步中关闭了浏览器并在向导中失去了位置，他们就可以返回向导并通过点击直接导航到第四步'Step 4'手风琴“。我的理解是，当浏览器关闭时，用户可以在重新打开浏览器时登陆到最后的第4步。如何在jQuery或javascript中实现，因为根据我的说法，当浏览器重新打开时，DOM将从头开始生成，所有的东西都将从开始加载...... 任何人都可以帮助我，因为这似乎很关键。任何帮助都将深受赞赏.......

Answer 1

实际上是的，这可以做到。您可以在URL中更改哈希标记，以指定您在向导中的位置。

wwww.example.com/mywizard.html#hashtag

这也可以有一个json对象来存储大量数据 encodeURI函数接受一个为URL构成的字符串，JSON.stringify将获取一个对象并将其转换为JSON代码:(每次需要更新应用程序的状态时都应该这样做。

var wizardData = {"MyProperty":"MyValue"};
var myhash = encodeURI(JSON.stringify(wizardData));
location.hash = myhash;

给你一个这样的网址：

wwww.example.com/#%7B%22MyProperty%22:%22MyValue%22%7D

要让对象退出，请再次使用location.hash：您将必须解码URL，然后将其转回Javascript对象。（这可能在页面加载时和window.onhashchange事件中完成。

document.onload = window.onhashchange = function() {
 var myhash = location.hash;
 //The hash always has the "#" in front, so we need to remove that.
 myhash = myhash.substr(1);
 var wizardData = JSON.parse(decodeURI(myhash));
 //Change the app to reflect the changes to the data
}

页面在更改时不会重新加载。如果以这种方式映射所有向导信息，您可能不需要任何其他逻辑来更新gui。如果你想手动更新你的gui，那么删除它设置window.onhashchange的部分。

Answer 2

单独使用JQuery / JavaScript无法实现这一目标。您需要考虑像cookie这样的持久解决方案。当用户通过向导进行操作时，您需要将当前位置保存到cookie。当用户返回您的网站时，只需阅读cookie并呈现相应的向导页面和/或元素。

请参阅此文章，了解如何在JavaScript中使用Cookie：

How do I set/unset cookie with jQuery?

使用jQuery恢复已关闭的网页

2 个答案: