Question

我已经阅读了十几次，因为状态对象可能存在多个键值对，并且它与新的历史记录条目相关联。但有人可以给我一个状态对象的好处的例子吗？它的实际用途是什么？我无法想象为什么不只要输入{}

Answer 1

您有一个用户可以选择颜色的页面。每次他们这样做，我们都会生成一个新的历史记录条目：

function doPushState(color) {
    var state = {},
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

我们暂时将状态对象留空并将URL设置为颜色名称（不要重新加载页面 - 该URL不存在，因此您将获得404）。

现在点击一个红色，绿色和蓝色。请注意，URL会更改。现在如果单击后退按钮会发生什么？

浏览器确实可以追溯到历史，但我们的页面没有注意到 - 网址从'/ blue'变回'/ green'，但我们的页面保持在'您选择了蓝色'。我们的网页与网址不同步。

这是window.onpopstate事件和状态对象的用途：

我们在州对象中包含我们选择的颜色

function doPushState(color) {
    var state = { selectedColor: color },
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

然后我们监听popstate事件，以便我们知道何时需要更新所选颜色，（在jQuery中）是这样的：

$(window).on('popstate', function(event) {
    var state = event.originalEvent.state;

    if (state) {
        selectColor( state.selectedColor );
    }
});

尝试更新的示例：run fiddle（editor view）：当用户浏览历史记录时，我们的页面会相应更新。

Answer 2

使用在区域视图中划分的自定义元素和模板在渐进式应用中维护用户视图和数据状态的具体前瞻性用例

想象一下64个盒子的网格作为你的视图，在大屏幕上的盒子是147 ^ 2一块

url表示64 /用户ID abs相关用户数据

然后，网络应用可以使用用户特定的状态数据填充其网格

在这个用例中，我完全相信是未来，用户不想分享他或她的个人状态和数据填充视图部分

使用以前的历史状态及其相关的650k数据

可以使用一些众所周知的排序方法，从浏览器历史记录和位置（包括州）重新组合整个复杂的应用程序。

很酷

Answer 3

我可以看到pushState，replaceState和window.onpopstate最明显的例子是网站的Ajax导航。

假设您的网站或网络应用已修复nav＆amp; footer ..这样，您可以将新网页的内容加载到特定容器中，例如新的<main>元素。

您可能不想重新加载页面，只需从新页面加载所需内容。

使用pushState方法意味着您将能够使用浏览器的返回和转发按钮进行导航，即使您没有重新加载页。

Nifty，是吗？

来自MDN：

HTML5引入了history.pushState（）和history.replaceState（）   方法，允许您添加和修改历史记录条目，   分别。这些方法与   window.onpopstate事件。

使用history.pushState（）更改在其中使用的引用者   更改后创建的XMLHttpRequest对象的HTTP标头   州。引荐来源将是窗口所在文档的URL   这是在创建XMLHttpRequest对象时。

实施例

有a great example on MDN here和相关的Git repo here。

pushState：状态对象究竟是什么？

3 个答案:

实施例