History.js和州

Question

请有人向我解释状态吗？

例如，使用history.js插件。

History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"

我理解最后一个参数，因为它是推送到地址栏的URL，但我不知道前两个。了解这些将有助于我将history.js实现到我的网站，因为我在后退/前进导航方面遇到了麻烦。

在Mozilla dev网站上说：

状态对象 - 状态对象是一个JavaScript对象，它与pushState（）创建的新历史记录条目相关联。每当用户导航到新状态时，都会触发popstate事件，并且事件的state属性包含历史记录条目的状态对象的副本。 状态对象可以是任何可以序列化的对象。因为Firefox将状态对象保存到用户的磁盘，因此可以在用户重新启动浏览器后恢复它们，因此我们在状态对象的序列化表示上强加了640k字符的大小限制。如果将序列化表示形式大于this的状态对象传递给pushState（），则该方法将引发异常。如果您需要更多空间，建议您使用sessionStorage和/或localStorage。

状态只是使用AJAX加载的代码的副本吗？或者它只是该代码的表示，因此可以调用它？

对此有任何见解表示赞赏！

Answer 1

state对象是任何Javascript对象 - 它可以是单个变量，也可以是函数和值的巨大hashmap。这是您想要用来表示该应用程序的“状态”的数据。这样的事情很常见：

var viewModel = {
    title: 'FAQs',
    url: 'faqs.html',
    favouriteColor: 'green',
    stepsCompleted: 4
};

history.pushState(viewModel, viewModel.title, viewModel.url);

这基本上是创建一个对象，其中包含任何需要“记住”并稍后恢复状态的对象 - 例如，如果用户遵循向导式的逐步形式或类似形式。

第二个参数title在很大程度上被浏览器暂时忽略，但可能用于前向/后向导航等用例，其中页面标题可能需要更新。