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. 空行会影响 Java 编译吗?

    简评:往往越简单的问题越容易被人们忽略. 问题 这个月的 Stack Overflow 有篇热门文章是国外有位开发者提出: 当我仅仅对 Java 类增加了一行空行,为什么编译后得到了两个不同的字节码文 ...

  2. C++基础知识:成员函数、对象拷贝、私有成员

    一.综述 类是我们自己定义的数据类型(新类型) 设计类时要考虑的角度: (1)站在设计和实现者的角度来考虑 (2)站在使用者的角度来考虑 (3)父类,子类 二.类基础 (1)一个类就是一个用户自己定义 ...

  3. python中json库中的load、loads、dump、dumps的区别与用法

    一.json.dumps(i): json中的dumps方法是用来将特定格式的数据进行字符串化的操作,比如列表字典都可以进行字符串化操作然后写入json的file:而且如果是要写入json文件就必须要 ...

  4. Ubuntu 16.04防火墙

    防火墙(ufw) 说明:简单版本的防火墙,底层依赖于iptables. 安装:sudo apt-get install ufw 查看状态:sudo ufw status 开启/关闭:sudo ufw ...

  5. webpack/gulp的z-index被改写

    webpack方法 new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true } }) gulp-cssnano 方法 .pipe(cssna ...

  6. header请求头信息详细介绍

    https://www.byvoid.com/zhs/blog/http-keep-alive-header HTTP协议头部与Keep-Alive模式详解 1.什么是Keep-Alive模式? 我们 ...

  7. WCF系列教程之WCF客户端调用服务

    1.创建WCF客户端应用程序需要执行下列步骤 (1).获取服务终结点的服务协定.绑定以及地址信息 (2).使用该信息创建WCF客户端 (3).调用操作 (4).关闭WCF客户端对象 二.操作实例 1. ...

  8. JDK中ClassLoader的分类以及ClassLoader间的层次关系

    几个常见的ClassLoader: bootstrap  class  loader: 最早启动的class  loader,一般使用C语言,汇编语言,或是c++写的,用操作系统本地语言写的.这个cl ...

  9. window.location.href详解

    在写web程序的时候,我们经常遇到跳转页面的问题,我们经常使用Response.Redirect做页面跳转,如果客户要在跳转的时候使用提示,这个就不灵光了,如: Response.Write(&quo ...

  10. Linux Directory Structure

    Note: Files are grouped according to purpose. Ex: commands, data files, documentation. Parts of a Un ...