1. history 是什么？
window上的一个对象，由来存储浏览器访问过的历史
2. 用途：
可以动态跳转任意一个已在历史记录中的地址
3..history方法：
1.forward() : 向后翻一页
2. back(): 回退一页
3. go(num) : num为负值时 表示回退 num为正值时表示前进
4. pushState(data, title, url): 添加一条历史记录，受同源策略限制，添加历史纪录后页面地址改变但是页面不会更新——H5新增的方法 IE9以下不兼容 5. replaceState(data, title, url) 替换当前的历史记录，受同源策略限制，添加历史纪录后页面地址改变但是页面不会更新 —— H5新增的方法 IE9以下不兼容 4. history事件：
1.popstate: 每次地址改变时触发，注：pushSate和replaceState的时候不会触发该事件。只有当用户点击回退或前进按钮或者调用back , forward, go方法才会触发这个事件
2.hashchange: 地址栏中hash值改变的时候会触发
 
data：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数中。如果不需要这个对象，此处可以填null。 title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。 url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
案例1：
history.forward() //前进一页
history.back() //回退一页
history,go(2) // 前进两页
history.go(-2) // 回退两页
console.log(history.length) // 打印挡墙历史记录的条数
案例2： 以下代码在服务器环境下
假设当前网址为http://localhost/index.html 使用pushState在历史记录里面添加一条历史记录
history.pushState({
page: 'page1'
}, 'page-1', './page.html');
打开当前的地址，会发现页面里面显示的内容为index.html里面的内容但是地址变为http://localhost/page.html ,这是因为pushState是向历史记录添加一条记录但是不会刷新页面。点击回退按钮地址栏会变化为index.html
即： pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏的显示地址发生变化
 
案例3：
假设当前网址为http://localhost/index.html 使用replaceState在历史记录里面替换一条历史记录
history.pushState({
page: 'page1'
}, 'page-1', './page.html');
打开当前的地址，会发现页面里面显示的内容为index.html里面的内容但是地址变为http://localhost/page.html ,点击回退按钮不会跳转到index.html页面，这是因为replaceState是在历史记录里面替换当前的记录，页面仍然不会刷新。
即： replaceState方法不会触发页面刷新，只是导致history对象发生变化，地址栏的显示地址发生变化
案例4:
假设当前网址为http://localhost/index.html
 history.pushState({

             num: 1

         }, 'title-history', '?num=1');

         history.pushState({

             num:2

         }, 'title-history', '?num=2');

         history.pushState({

             num: 3

         }, 'title-history', '?num=3');

         history.replaceState({

             num: 4

         }, 'title-history', '?num=4');

                 window.addEventListener('popstate', function (e) {

         //打印当前页面的数据（状态信息）

             console.log(e.state);

             console.log(history.state)

         }, false)

         // 当前页面地址为 http://localhost/index.html?num=4 以下代码均在浏览器控制台里面触发

        // history.back() // 当前页面地址为 http://localhost/index.html?num=2

        // history.forward()  // 当前页面地址为 http://localhost/index.html?num=4'

         // history.go(-2) // 当前页面地址为 http://localhost/index.html?num=1
案例4： 实现过滤效果
初始效果：

搜索关键词后的效果：

 
点击回退按钮之后的效果

 代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <meta http-equiv="X-UA-Compatible" content="ie=edge">

 <title>Document</title>

 <style>

 .content {

 width: 300px;

 height: 300px;

 border: 1px solid #000;

 }

 </style>

 </head>

 <body>

 <input type="text" id="words">

 <input type="button" value="搜索" id="btn">

 <div class="content">

 <ul id="showData">

 </ul>

 </div>

 <script>

 var words = document.getElementById('words');

 var data = [{

 name: 'HTML',

 id: 'html'

 }, {

 name: 'CSS',

 id: 'css'

 }, {

 name: 'JavaScript',

 id: 'js'

 }, {

 name: 'es6',

 id: 'es6'

 }, {

 name: 'es5',

 id: 'es5',

 }];

 function renderDom(data) {

 var str = '';

 data.forEach(function (item, index) {

 str += '<li>' + item.name + '</li>';

 });

 showData.innerHTML = str;

 }

 renderDom(data);

 btn.onclick = function (e) {

 var filterData = data.filter(function (item, index) {

 return item.name.indexOf(words.value) > -1;

 });

 history.pushState({

 word: words.value

 }, null, '?word=' + words.value);

 renderDom(filterData);

 }

 window.onpopstate = function (e) {

 console.log(e);

 var key = e.state ? e.state.word : '';

 var filterData = data.filter(function (item, index) {

 return item.name.indexOf(key) > -1;

 });

 renderDom(filterData);

 words.value = key;

 }

 </script>

 </body>

 </html>
 

欢迎加入web前端冲击顶级高薪大厂学习群，群聊号码：820269529

js历史记录的更多相关文章

  1. 用HTML/JS/PHP方式实现页面延时跳转

    WEB开发中经常会遇到页面跳转或延时跳转的需求,掌握各种页面跳转方式非常必要. 以下是我总结有用HTML/JS/PHP三类方式实现跳转的方法,例子皆为三秒后跳转到index.php 页面. 1,HTM ...

  2. js实现前端的搜索历史记录

    最近在对接前台页面(WEB端)时,产品要求需记录下客户的搜索记录,我们是前后台完全分离的项目,根本不能保存的session域中,没办法,虽然作为后台开发,遇到需求就自己研究了一通,先看一下最终效果图, ...

  3. js之添加浏览器历史记录

    如何生成一条历史记录 简单粗暴的方法,直接在当前页面的地址栏中输入地址 点击页面中有a标签的href 执行location.href = ‘xxx’(location.replace(‘xxx’)生成 ...

  4. fabric.js 翻转，复制粘贴，隐藏， 删除，历史记录，撤销， 剪切， 图层，组合打散，锁定等功能

    用vue写的 显示,隐藏 hide(){ this.canvas.getActiveObject().set('opacity', 0).setCoords(); this.canvas.reques ...

  5. js点击历史记录

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 利用js实现 禁用浏览器后退| 去除上一个历史记录链接

    也是查找了好多资料才找到的,这种方式,可以消除 后退的所有动作.包括 键盘.鼠标手势等产生的后退动作. <script language="javascript"> / ...

  7. js修改window对象中的url历史记录

    //页面地址:http://localhost/11/account.html//访问页面后,地址变为:http://localhost/11/account.html?type=banana con ...

  8. 在文本框输入数据后，因为有历史记录，鼠标点或者敲回车这个历史记录时，请问会触发什么JS事件

    非ie触发 oninput事件,ie触发>onpropertychange事件 jquery写法 $("#input").bind("input propertyc ...

  9. JS实现页面进入、返回定位到具体位置

    最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...

随机推荐

  1. 这是一次 docker 入门实践

    前言 其实接触 docker 也有一段时间了,但是一直没有做下总结,现在网上关于 docker 的介绍也有很多了,本着好记性不如烂笔头的原则,还是自己再记录一波吧. 实现目标 安装 docker ce ...

  2. String 源码浅析————终结篇

    写在前面 说说这几天看源码的感受吧,其实 jdk 中的源码设计是最值得进阶学习的地方.我们在对 api 较为熟悉之后,完全可以去尝试阅读一些 jdk 源码,打开 jdk 源码后,如果你英文能力稍微过得 ...

  3. 分布式系统的Raft算法学习笔记

    摘取自:  http://mp.weixin.qq.com/s?__biz=MzIyMTQ1NDE0MQ==&mid=2247483979&idx=1&sn=12864382e ...

  4. 链式二叉树的实现(Java)

    定义树节点: package 链式二叉树; public class TreeNode { private Object data; private TreeNode left; private Tr ...

  5. 46.ActiveMQ开篇（Hello World、安全认证、Connection、Session、MessageProducer、MessageConsumer）

    要给有能力的人足够的发挥空间,公司可以养一些能力平平甚至是混日子的人,但绝不能让这些人妨碍有能力的人,否则这样的环境不留也罢. 一.背景介绍 CORBA\DCOM\RMI等RPC中间件技术已经广泛应用 ...

  6. 启动多个appium服务(同时运行多台设备)

    准备: 一台真机一台模拟器(使用的是“夜神模拟器”) 先查看是否检测到设备  adb devices    由上图可看出没有检测到模拟器(夜神模拟器已开启) 可通过以下配置完成: 第一步:找到adb的 ...

  7. springcloud(七)-Feign声明式REST调用

    前言 前面我们使用的RestTemplate实现REST API调用,代码大致如下: public User findById(@PathVariable Long id) { return rest ...

  8. Q221 最大正方形

    在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 0 0 1 0 输出: 4 cla ...

  9. 18.async函数

    1.含义 async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generator 函数,依次读取两个文件. var fs = require('fs'); var ...

  10. Freemarker不显示对象的属性

    Freemarker不显示对象的属性 今天使用Freemarker在springboot项目中通过模板生成一些html文件.但是发现没有显示对象的属性. 找了很长时间,终于发现不显示对象的属性可能是两 ...