1.window
2.navigator
3.screen
4.location
5.history
6.弹出框
7.Timing事件
8.cookie与storage

浏览器对象包括window、navigator、screen、location、history

1.window

所有浏览器都支持window对象,它代表浏览器的窗口。

所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。

全局变量是window对象的属性,全局函数是window对象的方法,甚至(HTML DOM的)document对象也是 window 对象属性

1
2
3
window.document.getElementById("header");
等同于:
document.getElementById("header");

常用事件:window.onresize()监听浏览器窗口高宽变化,注意要使用箭头函数

1
2
3
4
// window.onresize()官方定义
window.onresize=function(){
console.log("浏览器窗口改变了!");
};

2.navigator

window.navigator对象表示浏览器信息,可以不带window前缀

navigator.appName:浏览器名称
navigator.appVersion:浏览器版本
navigator.language:浏览器设置的语言
navigator.platform:操作系统类型
navigator.userAgent:浏览器设定的User-Agent字符串
navigator.webdriver:返回浏览器是否被WebDriver驱动的布尔值(即判断是否是selenium控制爬虫程序)

3.screen

window.screen表示屏幕信息,可以不带window前缀

screen.width:屏幕宽度,以像素为单位
screen.height:屏幕高度,以像素为单位
screen.colorDepth:返回颜色位数,如8、16、24

拓:获取可视区域高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
document.documentElement.scrollTop ==> 滚动条垂直方向滚动距离

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

HTML精确定位:
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

4.location

window.location对象表示当前页面的URL信息(即地址栏),可不带window前缀书写

location.protocol; // ‘http’
location.host; // ‘www.example.com'
location.port; // ‘8080’
location.pathname; // ‘/path/index.html’
location.search; // ‘?a=1&b=2’(查询字符串,携带参数向浏览器发送数据,必须带有‘?’
location.hash; // ‘TOP’(锚点,url中的‘#’后面的数据
location.href 获取完整url
window.location.href="新的跳转url”:跳转到指定的页面
location.assign(url):加载一个新页面,在当前窗口跳转带这个url
location.replace(url):原页面替换成新页面,在当前窗口替换带这个url,但不会产生历史记录,即无法后退
location.reload():刷新当前窗口

5.history

window.history对象包含浏览器历史,可以不带window前缀,为了保护用户的隐私,JavaScript访问此对象存在限制。

常用方法:

  • history.back() - 等同于在浏览器点击后退按钮
  • history.forward() - 等同于在浏览器中点击前进按钮

6.弹出框

JavaScript有三种类型的弹出框:警告框,确认框和提示框

  1. 警告框
    如果要确保信息传递给用户,通常会使用警告框。当警告框弹出时,用户将需要单击“确定”来继续
    window.alert(“some text”); 可以不带window前缀

  2. 确认框
    如果您希望用户验证或接受某个东西,则通常使用“确认”框。当确认框弹出时,用户将不得不单击“确定”或“取消”来继续进行。如果用户单击“确定”,该框返回 true。如果用户单击“取消”,该框返回 false。

1
2
3
4
5
6
let r = confirm("请按按钮");
if (r === true) {
x = "您按了确认!";
} else {
x = "您按了取消!";
}
  1. 提示框
    如果您希望用户在进入页面前输入值,通常会使用提示框。当提示框弹出时,用户将不得不输入值后单击“确定”或点击“取消”来继续进行。如果用户单击“确定”,该框返回输入值。如果用户单击“取消”,该框返回 NULL

window.prompt(“some text”,”defaultText”); 可以不带window前缀

7.Timing事件

setTimeout(function,milliseconds):等待指定的毫秒数后执行函数
setInterval(function,milliseconds):等同于setTimeout(),但在每个给定的时间间隔内重复执行该函数

1
2
3
4
5
6
function myTimer() {
let d = new Date();
console.log(d.getFullYear())
}
// setInterval在每隔3秒就打印一次当前的月份
setInterval(myTimer, 3000);

clearTimeout(变量名)方法停止执行setTimeout()中规定的函数

1
2
3
<!--使用setTimeout等待执行函数,clearTimeout停止执行函数--->
<button onclick="myVar = setTimeout(myFunction, 3000)">试一试</button>
<button onclick="clearTimeout(myVar)">停止执行</button>

8.cookie与storage

cookie

  1. cookie的基础知识
  • cookie是有大小限制的,每个cookie所存放的数据不能超过4kb,如果cookie字符串的长度超过4kb,则该属性将返回空字符串
  • 每个cookie的格式都是这样的:<cookie名>=<值>; 名称和值都必须是合法的标示符
  • cookie是存在有效期的:在默认情况下,一个cookie的生命周期就是在浏览器关闭的时候结束。如果想要cookie能在浏览器关掉之后还可以使用,就必须要为该cookie设置有效期,也就是cookie的失效日期
  • cookie的数据类型为String
  1. 设置cookie

存储单个cookie值设置

1
2
3
4
5
// 设置单个键值对(推荐)
document.cookie="username=chd";

// 设置多个键值对,使用分号加空格(; ) 隔开,经测试,只有第一对键值生效(废弃)
document.cookie="userId=828; userName=hulk";
  1. 删除cookie

为了删除一个cookie,可以将其过期时间设定为一个过去的时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 法一
//获取当前时间
let date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-1);
//将userId这个cookie删除
document.cookie="userId=828; expire="+date.toGMTString();

// 法二(更简练)
let data = new Date(new Date().getTime() - 24*60*60*1000).toUTCString();
/*
new Date().getTime() 表示获取当前时间戳【毫秒级】
toUTCString() 表示根据世界时 (UTC)把Date对象转换为字符串,并返回结果
*/
  1. 设置cookie的有效时间

cookie 的生命周期也就是有效期和失效期,即 cookie 的存在时间。在默认的情况下,cookie 会在浏览器关闭的时候自动清除,但是我们可以通过expires来设置 cookie 的有效期

date值为GMT(格林威治时间)格式的日期型字符串,我们这个函数是按照天数来设置cookie的有效时间,如果想以其他单位(如:小时)来设置,那么改变第三行代码即可

1
2
3
4
5
let _date = new Date();
// _date.setDate(_date.getDate()+30);
_date.setDate(_date.getHours()+2);
_date.toGMTString();
document.cookie = "name=value;expires="+_date;

在vue或js中直接操作cookie

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let a = {
set: function (name, value, days) {
var d = new Date;
d.setTime(d.getTime() + 24*60*60*1000*days);
window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
},

get: function (name){
var v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
return v ? v[2] : null;

},

delete: function (name) {
this.set(name, '', -1);
}
}

localStorage与sessionStorage

HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服务器,仅仅是本地保存,有大小限制。

  • localStorage 用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。同源可以读取并修改localStorage。注意,在IE8以上的IE版本才支持localStorage这个属性,且不能被爬虫爬到,localStorage的使用也是遵循统一『同源策略』的,所以不同的网站直接是不能共用相同的localStorage

  • sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问,并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅是会话级别的存储,只允许同一窗口访问。

localStorage与sessionStorage的封装(可设置过期时间):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
//存储,可设置过期时间
function set(key, value, expires) {
// console.log(key);
let params = { key, value, expires };
if (expires) {
// 记录何时将值存入缓存,毫秒级
var data = Object.assign(params, { startTime: new Date().getTime() });
localStorage.setItem(key, JSON.stringify(data));
} else {
if (Object.prototype.toString.call(value) === '[object Object]') {
value = JSON.stringify(value);
}
if (Object.prototype.toString.call(value) === '[object Array]') {
value = JSON.stringify(value);
}
localStorage.setItem(key, value);
}
}
//取出
function get(keys) {
let item = localStorage.getItem(keys);
// 先将拿到的试着进行json转为对象的形式
try {
let obj = JSON.parse(item);
if(typeof(obj) == 'object' && obj ){
item = obj;
}
} catch (error) {
console.log('error:'+keys+'!!!'+error);
return false;
}
// 如果有startTime的值,说明设置了失效时间
if (item && item.startTime) {
let date = new Date().getTime();
// 如果大于就是过期了,如果小于或等于就还没过期
if (date - item.startTime > item.expires) {
localStorage.removeItem(item.key);
return false;
} else {
return item.value;
}
} else {
return item;
}
}

//导出
module.exports = {
set,
localGet:get
};

// 存值
request.set('uid',option.uid,43200000); //时间单位毫秒级
request.set('token',option.token,43200000);
// 取值
let uid = request.localGet('uid');
let token = request.localGet('token');

参考文章


 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议