web 历史状态管理

1、现代web 应用中，用户的每一次操作并不一定会打开一个新的页面( ajax 操作)，因此浏览器的 “后退”，“前进”按钮就起不了作用，导致用户很难再不同的状态之间切换。

要解决这个问题主要有两种方法：

1） 使用 hashchange 事件，通过 hashchange 事件，可以知道 URL 的参数什么时候发生了变化，什么时候就该有所反应。

2）使用 HTML5 提供的 history 对象管理 API ，history.pushState()，history.replaceState()

 

2、通过状态管理 API，可以在不加载新页面的情况下改变浏览器的 URL，浏览器不会真的想服务器发送请求，只是改变历史状态。

1）history.pushState(stateObject, title, url) ：包含三个参数 ，分别是状态对象、新状态标题和可选参数相对URL 。

       第一个参数状态对象应该传入提供页面状态信息的数据 ，第二个参数还没有浏览器实现 ，添加也没有什么用，所以可以传入一个空字符串 ，如果使用了第三个参数，那么执行这个函数后，浏览器地址也会更新

当我们从状态栈中的一个状态跳到另一个状态时，就会触发 window对象的 popstate 事件，popstate 事件对象中有一个 state 属性，存储着当初传递给pushState()的状态对象

<button id="next">下一页</button>
当前页数：<span id="cur">0</span>

var next = document.getElementById('next');
    var cur = document.getElementById('cur');
    var page = 0;
    next.onclick = function(){
        page++;
        history.pushState({page: page}, '','?page=' + page);
        //状态对象中存储当前页数
        cur.innerHTML = page;
    }
    window.onpopstate = function(e){
        if(e.state){
            cur.innerHTML = e.state.page;
        }else{          // 返回第一个页面时，e.state = null
            cur.innerHTML = 0;
        }
    }

点击 “下一页” 按钮会在不刷新页面的情况下改变url ，并且能通过浏览器的 “后退” 按钮，返回到前一个状态页面

2）history.replaceState(stateObject, title)：参数与pushState()前两个参数相同 ，会重写当前的状态，也就是说替换当前的记录

 <button id="next">下一页</button>
    <button id="update">更新样式</button>
    当前页数：<span id="cur">0</span>

  var next = document.getElementById('next');
    var update = document.getElementById('update');
    var cur = document.getElementById('cur');
    var page = 0;
    next.onclick = function(){
        page++;
        history.pushState({page: page}, '','?page=' + page);
        cur.innerHTML = page;
    }
    update.onclick = function(){
        history.replaceState({page: history.state.page + '(已读)'},'');
        //部分浏览器实现了history.state返回当前状态
    }
    window.onpopstate = function(e){
        if(e.state){
            cur.innerHTML = e.state.page;
        }else{
            cur.innerHTML = 0;
        }
    }

 点击 “下一页” 按钮后，再点击 “更新”按钮，再点击“下一页”，再返回，会发现已改变

 

Safari 和 Chrome 中，传递给 pushState() 和 replaceState() 的状态对象不能包含 DOM 元素，只有 Firefox 支持在状态对象中包含 DOM 元素！Opera 还支持 history.state 属性，它会返回当前状态的状态对象。

使用 pushState() 创建的每一个“假”的 URL，在服务器中都有一个实际存在的 URL与之对应，否则用户如果点击了“刷新”按钮，就会导致 404 错误