history

javascript history对象
在chrome控制台输入history，打印如下：

history保存浏览器访问的历史
1.length
保存浏览器记录的URL数量
初始时，该值为1
此值在IE10+浏览器有兼容性问题，所以不常用。
2.go
使用go方法可以在用户的历史记录中任意跳转。参数表示向前或者向后跳转的页面数的整数值。
负数表示向后跳转，类似于后退按钮；反之正数表示向前跳转;无参数或者参数为0，可以刷新当前页面。
如果参数值超出了历史记录边界，不报错，只是静默失败
3.back
用于模仿浏览器的后退按钮，类似于

history.go(-1);

如果参数值超出了历史记录边界，不报错，只是静默失败
4.forward
用于模仿浏览器前进按钮，类似于

history.go(1);

如果参数值超出了历史记录边界，不报错，只是静默失败
使用历史记录时，往往是从缓存中加载页面，而不是要求服务器重新发送新的网页。

html5为history加了两个API:pushState和replaceState

1.pushState
该方法向浏览器历史添加了一个状态，最新状态。
该方法有3个参数：stateObj title(被忽略) url(新地址)
不会触发页面刷新,也不会触发页面加载新URL页面，只是改变URL地址(同一域下，跨域操作会报错)，如果hash变了也不触发hashChange事件
使用方法:

var wd = '新地址';
var stateObj = {
	title: 'newPage',
	url: '?ie=utf-8&wd=' + wd,
	wd: wd
};
history.pushState(stateObj, null, '?ie=utf-8&wd=' + wd);

效果如下图:

如上图，修改地址参数，页面无刷新，作用：点击触发地址修改，但是页面只有部分发生变化。
2.replaceState
用法同pushState，只是不是新增state.
3.popState
history发送变化时触发popState事件

实现无刷新改变页面部分内容
如下代码

//index.html
<div class="j-nav-wrap nav-wrap" static="bl=navList">
	<h2>类型</h2>
	<ul class="nav clearfix">
		<li class="nav-link" data-type="all">
			<a  static="stp=intro">全部</a>
		</li>
		<li class="nav-link" data-type="movie">
			<a  static="stp=intro">电影</a>
		</li>
		<li class="nav-link" data-type="tv">
			<a  static="stp=videos">电视</a>
		</li>

		<li class="nav-link" data-type="show">
			<a  static="stp=videos">综艺</a>
		</li>
		<li class="nav-link" data-type="comic">
			<a  static="stp=tickets">动漫</a>
		</li>
	</ul>
	<h2>日期</h2>
	<ul class="nav clearfix">
		<li class="nav-link" data-year="all">
			<a  static="stp=intro">全部</a>
		</li>
		<li class="nav-link" data-year="2017">
			<a  static="stp=intro">2017</a>
		</li>
		<li class="nav-link" data-year="2016">
			<a static="stp=videos">2016</a>
		</li>

		<li class="nav-link" data-year="2015">
			<a  static="stp=videos">2015</a>
		</li>
		<li class="nav-link" data-year="2014">
			<a  static="stp=tickets">2014</a>
		</li>
	</ul>
</div>

//index.js
	var type = 'all';
    var year = 'all';
    window.onload = function() {
        var url = location.search;

        var obj = {};
        url.replace(/([^&=?#]*)=([^&=?#]*)/g, function (src, $1, $2) {
            obj[$1] = $2;
        });

        if(obj.type) {
           type = obj.type; 
        }
        if (obj.year) {
            year = obj.year;
        }
        $('.nav-link').trigger('click', 'default');
   };

   function toggleHandler() {
        $('.nav-link').removeClass('active');
        $('.nav-link[data-type=' + type  +']').addClass('active');
        $('.nav-link[data-year=' + year  +']').addClass('active');
        var url = '?type=' + type + '&year=' + year;
        var stateObj = {
            title: null,
            url: url
       };

       history.pushState(stateObj, null, url);
   }

   $('.nav-link').on('click', function(e, ext) {
        if(!ext) {
            var $e = $(e.currentTarget);
            if($e.data('type')) {
               type = $e.data('type'); 
            }
            else if ($e.data('year')) {
                year = $e.data('year');
            }
        }
        toggleHandler();
   });

图如下：

参考文章：
HTML5之pushstate、popstate操作history，无刷新改变当前url