网页上模拟浏览器前进后退功能

最近的一个项目，因为是内嵌客户端的网页，产品经理希望能在页面上，实现浏览器的前进和后退功能，类似浏览器左上角的按钮。

前进和后退是很简单的，通过window.history对象的相关方法，比如go、forward、back即可实现，关键是，如何判断当前是否已经前进(后退)到最前面(后面)一页了呢？

经过一阵思考，最终我使用了cookie来存储用户浏览信息的方式，在cookie中存放一个数字，该数字表示用户当前正在浏览历史记录中的第几页。历史记录的总页数通过history的length属性来获取。

具体实现为：用户每点击一次页面上的跳转链接，都会在cookie中设置一个cur_news_page变量，该变量代表的，即是用户当前正在浏览历史记录中的第几页；用户每次点击前进、后退按钮，都会对这个值进行加减操作；最终通过这个值与history.length的比较，判断是否已经前进(后退)到最前面(后面)一页。

代码如下：

// @charset "utf-8";
// 顶部工具栏
var Controller_Toolbar = function () {
	var self = this,
		_isFirstPage = null,
		_isLastPage = null,
		_initSwitchPageEvent = null,
		_forword = null,
		_goback = null,
		_setCount = null,
		_init = null;
	
	/**
	 * 工具栏事件(前进、后退)
	 * 思路：在cookie中存储Integer型变量以确定用户当前浏览的页面位置
	 * cur_news_page	:	当前页下标
	 */
	_initSwitchPageEvent = function () {
		$('.back').live('click', function () {
			if (!_isFirstPage()) {
				_goback();
			}
		});
		$('.forword').live('click', function () {
			if (!_isLastPage()) {
				_forword();
			}
		});
		
		$('.btn_left').click(function () {
			_setCount();
		});
		$('.btn_right').click(function () {
			_setCount();
		});
		$('.highlight_tip > span').click(function () {
			if (!$(this).hasClass('current')) {
				_setCount();
			}
		});
		
		
		// 初始样式
		if (!_isFirstPage()) {
			$('.back_disabled').removeClass('back_disabled').addClass('back');
		} 
		if (!_isLastPage()) {
			$('.forword_disabled').removeClass('forword_disabled').addClass('forword');
		}
	};
	
	/**
	 * 计数变量的赋值
	 */
	_setCount = function () {
		var totalPage = history.length || 1;
		Util.Cookies.set('cur_news_page', (parseInt(totalPage) + 1));
		
	};
	
	/**
	 * 是否为第一页
	 * @returns {Boolean}
	 */
	_isFirstPage = function () {
		var curPage = Util.Cookies.get('cur_news_page'),
		curPage = curPage || 1;
		if (curPage == 1) {
			return true;
		}
		return false;
	};
	
	/**
	 * 是否为最后一页
	 * @returns {Boolean}
	 */
	_isLastPage = function () {
		var curPage = Util.Cookies.get('cur_news_page');
		curPage = curPage || 1;
		var totalPage = history.length || 1;
		if (curPage == totalPage) {
			return true;
		}
		return false;
		
	};
	
	/**
	 * 前进
	 */
	_forword = function () {
		var curPage = Util.Cookies.get('cur_news_page');
		Util.Cookies.set('cur_news_page', (parseInt(curPage) + 1));
		history.go(+1);
		
	};
	
	/**
	 * 后退
	 */
	_goback = function () {
		var curPage = Util.Cookies.get('cur_news_page');
		Util.Cookies.set('cur_news_page', (parseInt(curPage) - 1));
		history.go(-1);
	};
	
	_init = function () {
		_initSwitchPageEvent();
	};
	
	_init();
};