Session History 属性和方法-阿里云开发者社区

开发者社区> 淡色的云> 正文

Session History 属性和方法

简介: History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。 js通过window.history来访问和操作的,操作的范围是某个tab的会话历史记录。 这个tab打开后,tab内的跳转或者你手动输入的地址,都在控制范围内。
+关注继续查看

History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。
js通过window.history来访问和操作的,操作的范围是某个tab的会话历史记录。
这个tab打开后,tab内的跳转或者你手动输入的地址,都在控制范围内。

属性
1. History.length
返回一个整数,该整数表示会话历史中元素的数目,包括当前加载的页。例如,在一个新的选项卡加载的一个页面中,这个属性返回1。
在这里我们想想 history.go(-histoy.length) 会发生什么呢,history.go(-history.length+1) 又会发生什么。
history.go(-histoy.length) 什么都不会发生,因为你最多只能返回 history.length - 1
history.go(-history.length+1) 当然是返回到最初打开的页面

2. History.scrollRestoration
置默认滚动恢复行为,属性可以是自动的(auto)或者手动的(manual),默认值是auto。
就是你看某个网站滚动以后,点击链接进入新页面后,再点击返回的时候,会自动回复到原来的滚动位置。 不然的话我们可能需要记住某个值,然后window.scrollTo或者Element.scrollIntoView。
看到这个就眼前一亮了,滚动恢复,这么好的属性,相见恨晚。
兼容性, PC除了IE和Edge都还好,移动端依旧是IE和Edge,外加 Andriod内置浏览器。

3. History.state
状态值,这个值一般是在histpory.pushState(state,title,url)的第一个参数设置。之后,当地址栏匹配url时,你就可获得对应的state,这个在做前端路由的时候,路由间传参是不是赶脚很有用。

方法
1. go
go(number)
通过当前页面的相对位置从浏览器历史记录。
-1的时候为上一页,参数为1的时候为下一页.
当整数参数超出界限时,例如: 如果当前页为第一页,前面已经没有页面了,我传参的值为-1,那么这个方法没有任何效果也不会报错。
当没有参数的时候或者不是整数的参数时, chrome和firefox下面是相当于刷新, 不会增加访问历史,基本相当于window.location.reload()。

2. History.back
前往上一页, == 点击浏览器左上角的返回按钮

3. History.forward
前往下一页,, == 点击浏览器左上角的前进按钮

4. History.pushState
pushState(state, title ,url)

  • state state 对象可以是任何可以序列化的东西。触发popstate事件时,事件的state属性包含了历史纪录的state对象,当然通过history.state也可以获得当前访问历史记录的state。
  • title 现在大多数浏览器不支持或者忽略这个参数,最好用null代替
  • url 新地址,新URL必须和当前URL在同一个源下。浏览器在调用pushState()方法后不会去加载这个URL,但有可能在之后会这样做,比如用户重启浏览器之后,这个就有点意思了。有人可能会问,这个怎么测试呢,启动chrome,打开任意网站,输入 history.pushState(null,null,'/xx/xx/xx'),然后打开新tab,输入 chrome://restart/, 这个在做单页面程序的时候,解决这种问题,需要结合服务端支持来解决这种问题。之后的文章会说道这个。

4. History.replaceState
replaceState(state, title ,url)
参数和pushState是一样的,不过这方法不会增加新的历史记录,而是替换当前的历史记录。

window的popstate事件

配合window.history使用的还有一个window的popstate事件。
每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发。
调用history.pushState()或者history.replaceState()不会触发popstate事件,popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).
当网页加载时,各浏览器对popstate事件是否触发有不同的表现, 自己测试的话chrome和firfox的较新版本都不会触发。

 window.onpopstate = function(event) {
   setupPage(event.state);
   console.log('onpopstate')
 }

event.state参数就是我们pushState,replaceState传入的参数。
最后来看一个简单的demo.

History Demo

History | Can I Use
Session history and navigation
Manipulating the browser history
History.js polyfill
History | MDN
popstate
jquery-pjax

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9494 0
SSIS常用的包—通用的属性
  今天讲学习一下SSIS包中通用的属性,这部分没有实际操作的部分,只是一些简单的介绍。无论使用包中的何种task,都有一些通用的属性,在这里列举:   • Disable:设置这个属性为true使该task不能执行  • DelayValidation:设置为true只至运行时才验证task中的属性,在非连接状态下和为task输入一个外部参数值但是直到部署时才验证这种情况下会很有用。
563 0
【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81055973 ...
872 0
SSIS高级转换任务—在Package中是用临时表是需要设置RetainSameConnection属性
在上一个导入列这个例子中我们创建一个实际的表来存储文件路径,在生产环境中我们可能不会创建一个实际的物理表来存储这些信息,而是创建临时表。这里有一个小小的技巧,在Control Flow中拖放两个Execute SQL task,一个创建临时表,另一个销毁临时表,执行这个package,会遇到一个错误,在Progress中提示信息显示不存在这个临时表。
654 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12036 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13177 0
【hibernate merge】session1.merge(T entity)方法的含义和update方法的区别
注意:  MERGE语句是SQL语句的一种。在SQL Server、Oracle数据库中可用,MySQL、PostgreSQL中不可用。   1》session1.merge(T entity) 合并实体的方法。
766 0
eclipse + JBoss 5 + EJB3开发指南(4):Session Bean中的注释方法
本文为原创,如需转载,请注明作者和出处,谢谢!     有时需要在Session Bean中初始化和释放一些资源。这些工作应该在SessionBean的@PostConstruct和@PreDestroy方法中进行。
832 0
+关注
淡色的云
不争不弃,喜欢淡色的云。
55
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载