ajax与HTML5 history pushState/replaceState

一、网站分页的实现方式有哪些

整页刷新
借助iframe
ajax请求
......

二、各实现方式的缺点

整页刷新：造成效率损失（等待时间长），流量消耗大

借助iframe：产生很多页面，浏览器的后退按钮无效，多数小型的移动设备（PDA 手机）无法完全显示框架，多框架的页面会增加服务器的http请求
ajax请求：无法前进与后退，如重新请求后台数据，则会造成重复请求并影响体验

现在很多微信网页分页都是用的ajax上拉加载更多来实现，但是会遇到一些问题，比如分页数量较大，有100页，每页10条，每条都有各自的详情页，当用户浏览到100页时，点了一条详情进去浏览，返回的时候想继续往下看，但是发现页面重新回到了第一页，想看101页，必须从头再来一遍，想必用户也是很苦恼了，体验太差了，有人说可以用传统的分页条，可是毕竟比较传统，好用但是落后，本文就是针对类似的问题做了一些调研，得到了其中一种方案

三、使用ajax和history.pushState无刷新改变页面URL

为了解决传统ajax带来的问题，HTML5里引入了新的API，即：history.pushState, history.replaceState
可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。
pushState是将指定的URL添加到浏览器历史里，replaceState是将指定的URL替换当前的URL
window对象上提供了onpopstate事件响应浏览器的前进、后退操作
    demo：http://www.zhangxinxu.com/study/201306/ajax-page-html5-history-api.html

demo思路解析

每次手动点击左侧的菜单，将Ajax地址的查询内容(?后面的)附在demo HTML页面地址后面，使用history.pushState塞到浏览器历史中。

浏览器的前进与后退，会触发window.onpopstate事件，通过绑定popstate事件，就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入，实现Ajax的前进与后退效果。

页面首次载入的时候，如果没有查询地址、或查询地址不匹配，则使用第一个菜单的Ajax地址的查询内容，并使用history.replaceState更改当前的浏览器历史，然后触发Ajax操作。

这个history的应用就是能够给带来用户很好的体验，但是对于我们上面的问题还是得不到解决，我们需要借助另一个东西，那就是localStorage。

localStorage的特性

localStorage是用来存储客户端临时信息的对象。
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），不同浏览器无法共享localStorage中的信息。

本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串

localStorage使用方法

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

localStorage.getItem("key");//获取名称为“key”的值
localStorage.removeItem("key");//删除名称为“key”的信息。

localStorage.clear();​//清空localStorage中所有信息

上面提到的100页数据，我们把它缓存到localStorage里，当浏览器后退的使用，利用history从缓存里取历史数据渲染就可以做到本文提出的难题了