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. Xcode 编译更改 Build 输出路径

    Xcode新建一个工程,build之后,可执行文件一般在 ~/Library/Developer/Xcode/DerivedData 下. 可以把这个路径指定为当前工程目录.  指定方法 Xcode ...

  2. leetcode-74-搜索二维矩阵

    题目描述:  编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. 每行的第一个整数大于前一行的最后一个整数. 示例 1: 输入: ...

  3. Spring注入方式(1)

    Spring支持3种依赖注入方式,分别为属性注入.构造器注入和工厂方法注入(很少使用,不推荐),下面分别对属性注入和构造器注入详细讲解. 1.常量注入 属性注入是通过setter方法注入Bean的属性 ...

  4. day3.python 学习之列表

    python中列表用[ ]表示, list =  [ ] #表示一个空列表 1.list = [ 'A','B','C',‘D’] print(list[0]) # 表示打印出列表中的第一个元素,列表 ...

  5. linux系统服务管理

    centos7的服务管理命令 systemctl start 服务名称 systemctl stop 服务名称 systemctl status 服务名称 systemctl restart 服务名称 ...

  6. 语音转文字小工具开发Python

    # -*- coding: utf- -*- import requests import re import os import time from aip import AipSpeech fro ...

  7. HBTS(HBOI) 2019 真实退役记

    Day 0 早上迷迷糊糊醒了不知道多久,反正差不多的时间被叫醒了,然后走去了火车站. 这次终于取到了蓝色的车票,以前去武汉的车票都取的红色不知道为什么-- 在火车上看了<悲伤逆流成河>,稍 ...

  8. shiro学习笔记_0200_认证

    认证,身份验证,验证用户是否合法 在shiro中,用户需要提供principals (身份)和credentials(证明)给shiro,从而应用能验证用户身份: principals:用户的身份信息 ...

  9. thinkPHP5配置nginx环境无法打开（require(): open_basedir restriction in effect. File(/mnt/hgfs/root/tp5/thinkphp/start.php) is not within the allowed path(s)

    今天想把玩一下tp5,结果怎么都无法访问,每次都是报500错误,我把错误提示都打开看到下面的错误 require(): open_basedir restriction in effect. File ...

  10. 16.Generator函数的语法

    1.简介 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同. 执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机 ...