一、网站分页的实现方式有哪些
- 整页刷新
- 借助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思路解析
- 每次手动点击左侧的菜单,将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从缓存里取历史数据渲染就可以做到本文提出的难题了