浏览器的地址栏信息
window中有一个location属性,是对象数据类型location{}
location中的href属性
读取:
语法:window.location.href;
返回值:获取到地址栏信息,是以url编码格式返回;
设置:
语法:window.location.href = 'url';
作用:去到你要去的页面(当前页面打开url页面);
例子:window.location.href = 'http://www.baidu.com';
浏览器的reload()方法
语法:window.reload();
作用:用来刷新页面;
注意:不要在刷新页面的地方发开,否则会一直刷新;
浏览器的常用事件
onload 事件
语法:window.onload() = function(){}
执行时机:在页面中所有内容加载完毕后执行
实际应用:一般script标签建议写在body的末尾,因为需要操作的结构的代码部分放在头部的话,要操作的那部分结构可能还没加载完,代码就会报错!如果要解决这个问题,就要在操作结构的代码外面加上onload事件。
onresize 事件
语法:window.onresize = function(){}
执行时机:浏览器的窗口大小发生改变以后触发函数,不管是高度还是宽度。
onscoll事件
语法:window.onscroll = function(){}
执行时机:当滚动条的位置发生变化/页面发生滚动的时候触发
浏览器网页卷去的距离
有<!DOCTYPE>标签的情况:
语法:document.documentElement.scrollTop/Left
无<!DOCTYPE>标签的情况:
语法:document.body.scrollTop/Left
兼容性写法:document.documentElement.scrollTop||document.body.scrollTop
返回值:一个数值类型的数据;
浏览器滚动到一个具体位置
语法:window.scrollTo(参数)
参数有两种传递方式:
1.传递数字
必须传递两个数字,第一个表示横坐标的值(x),第二个表示纵坐标的值(y),只传递一个会报错。
特点:没有过渡效果
2.传递对象
对象中可以是一个值也可以是两个值;
例子:window.scrollTo({top:1000,left:1000,[behavior:'smooth']})
浏览器标签页的操作
开启新的标签页:window.open(地址)
关闭标签页:window.close(地址)
浏览器的历史记录
在window对象中有一个history属性
历史回退(back):window.history.back(),要操作回退一定要有历史记录
历史前进(forward):window.history.forward(),要操作前进一定要有历史记录
历史跳转(go):window.history.go(参数),要操作历史跳转一定要有历史记录
*正整数:历史前进 负整数:历史后退*
本地存储
storage:本地存储,存储大小在5MB
localStorage:长期存储,只要不手动删除就长期存在,也可以跨页面操作
只能保存基础数据类型,即数据类型中的字符串,获取的也是字符串
**操作:**
添加(增) window.localStorage.setItem('名称',值)
修改 window.localStorage.setItem('名称',值)
获取 window.localStorage.getItem('名称')
删除 window.localStorage.removeItem('名称')
清除 window.localStorage.clear()----全部清除
sessionStorage:会话存储,会随浏览器的关闭清空,不能跨页面
只能保存基础数据类型,即数据类型中的字符串,获取的也是字符串
**操作:**
添加(增) window.sessionStorage.setItem('名称',值)
修改 window.sessionStorage.setItem('名称',值)
获取 window.sessionStorage.getItem('名称')
删除 window.sessionStorage.removeItem('名称')
清除 window.sessionStorage.clear()
cookie: 需要在服务器上打开,前端的js和后端的语言都可以操作cookie
**保存数据**:document.cookie = 值(key = value)
存储指定过期时间的数据:document.cookie = 'a=1000;expires='+ time(*我们设置的是北京时间,但是服务器上保存的是世界标准时间*)
**获取数据:**
cookie是依赖域名的,你在哪个域名下保存的,就只能在哪个域名使用
时效性:默认是会话存储,关闭浏览器就没了,我们可以手动设置过期时间