pushState：状态对象究竟是什么？ [英] pushState: what exactly is the state object for?

问题描述

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

解决方案

以下是一个小例子：运行小提琴（编辑器视图）： p>

您有一个页面，用户可以在其中选择颜色。每次他们做，我们产生一个新的历史记录：

 函数doPushState（color）{
 var state = { }，
 title =页面标题，
 path =/+ color; 
 
 history.pushState（状态，标题，路径）; 
}; 
  

现在我们将状态对象留空，并将URL设置为颜色名称（不要重新加载该页面 - 该URL不存在，所以你会得到一个404）。

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

浏览器确实回溯到历史记录中，但我们的网页没有注意到 - 网址从'/ blue '回到'/ green'，但我们的页面保持'你选择了蓝色'。我们的网页与URL不同步。

这就是 window.onpopstate 事件和状态对象用于：

1. 我们将所选颜色包含在我们的状态对象中
   
   

    函数doPushState（color）{
    var state = {selectedColor：color}，
    title =Page title，
    path =/ +颜色; 
    
    history.pushState（状态，标题，路径）; 
   }; 
     




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

     $（ （状态）{
    selectColor（state.selectedColor） ; 
   } 
   }）; 
     

尝试更新示例：运转小提琴（编辑视图）：当用户浏览历史记录时，我们的页面会相应更新。

I've read a dozen of times now that the state object could exists of multiple key|value pairs and that it is associated with the new history entry. But could someone please give me an example of the benefits of the state object? Whats the practical use of it? I can't imagine why not just typing in {}

解决方案

Take this small example: run fiddle (editor view):

You have a page where a user can select a color. Every time they do, we generate a new history entry:

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

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

We leave the state object blank for now and set the URL to the color name (don't reload the page - that URL doesn't exist, so you will get a 404).

Now click on a red, green and blue once each. Note that the URL changes. Now what happens if you click the back button?

The browser does indeed go back in history, but our page doesn't notice that - the URL changes from '/blue' back to '/green', but our page stays at 'You have selected blue'. Our page has gone out of sync with the URL.

This is what the window.onpopstate event and the state object are for:

1. we include our selected color in our state object

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

2. Then we listen for the popstate event, so that we know when we have to update the selected color, which (in jQuery) is this:

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

Try the updated example: run fiddle (editor view): our page now updates accordingly when the user navigates back through history.

这篇关于pushState：状态对象究竟是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！