ajax与HTML5 history pushState/replaceState

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

1. 整页刷新
2. 借助iframe
3. ajax请求
4. ......

二、各实现方式的缺点

1. 整页刷新：造成效率损失（等待时间长），流量消耗大
   
2. 借助iframe：产生很多页面，浏览器的后退按钮无效，多数小型的移动设备（PDA 手机）无法完全显示框架，多框架的页面会增加服务器的http请求
3. ajax请求：无法前进与后退，如重新请求后台数据，则会造成重复请求并影响体验
   

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

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

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

    demo：http://www.zhangxinxu.com/study/201306/ajax-page-html5-history-api.html

demo思路解析

1. 每次手动点击左侧的菜单，将Ajax地址的查询内容(?后面的)附在demo HTML页面地址后面，使用history.pushState塞到浏览器历史中。
   
2. 浏览器的前进与后退，会触发window.onpopstate事件，通过绑定popstate事件，就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入，实现Ajax的前进与后退效果。
   
3. 页面首次载入的时候，如果没有查询地址、或查询地址不匹配，则使用第一个菜单的Ajax地址的查询内容，并使用history.replaceState更改当前的浏览器历史，然后触发Ajax操作。
   

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

localStorage的特性

1. localStorage是用来存储客户端临时信息的对象。
2. localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
   
3. 相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），不同浏览器无法共享localStorage中的信息。
   
4. 本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串
   

localStorage使用方法

1. localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
   localStorage.getItem("key");//获取名称为“key”的值
2. localStorage.removeItem("key");//删除名称为“key”的信息。
   localStorage.clear();​//清空localStorage中所有信息
   

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

附PPT：http://download.csdn.net/detail/yilian_develope/9632613