BOM、cookie对象、本地存储

BOM(borwser object model的简写)，浏览器对象模型

浏览器对象模型提供了一些方法使得我们能够操作浏览器或者获得浏览器的信息，比如浏览器的大小。

1、window对象

一个浏览器的窗口就代表一个window对象，如果一个页面中嵌套有框架，该框架也有自己的window对象

所有JavaScript的全局变量或者函数都会自动成为window对象下的属性或方法

全局变量成为window对象的属性

全局函数成为window对象的方法

document(HTML文档)也是window下的一个属性

window对象下的方法或属性，大部分可以忽略window前缀

下面两行代码效果相同
console.log(document.querySelector(".test"));
console.log(window.document.querySelector(".test"));
//下面两行代码效果相同
//alert("123");
//window.alert("123");
//var clo= window.confirm("确定关闭页面吗？");
//window.prompt("请输入用户名");

window.close()关闭浏览器窗口
注意：在火狐浏览器不兼容

if(clo){
window.close();
}

window.open()打开新的窗口

默认是在新窗口打开

可以传入多个参数

_self(当前窗口打开)

可以设置新窗口的大小，前提不是在当前窗口跳转

可以设置新窗口的名字。

		//window.open("http://www.baidu.com","_blank","width=300px,height=300px");

计时器也是window下的方法

window.setInterval();
window.setTimeout()

moveBy(x,y);可以设置新窗口打开的位置

scrollTo(x,y);可以设置内容滚动位置

scrollBy(x,y);可以设置内容滚动位置

注意：通过添加点击事件才能触发

scrollTo和scrollBy的区别

scrollTo跟相对浏览器定不去的位置进行移动

scrollBy是根据文档的原来位置进行位移。

window.open("test.html","myPage","width=500px,height=300px");
window.scrollBy(0,100);

<a href="3、screen对象.html">screen</a>
<div class="test" style="height:1000px;">
<div class="btn1">返回上一页</div>
<div class="btn"style="margin-top: 200px;">按钮</div>
</div>

获取元素
var btn=document.getElementsByClassName("btn")[0];
添加点击事件
btn.addEventListener("click",function(){
window.scrollTo(0,200);
});
btn.addEventListener("click",function(){
window.scrollBy(0,200);
})

BOW没有统一标准，所以以下拿到的数据在不同浏览器上面会有偏差

window对象属性

innerWidth,innerHeight,获取浏览器窗口的宽高

注意：这里获取的宽高，不包括工具栏，还有地址栏。

低版本的IE不能够兼容

document.body.clientHeight 拿到html文档的高度
document.documentElement.clientHeight拿到浏览器窗口的高度
document.write(window.innerWidth);
document.write(window.innerHeight);
//ie中可以通过下面方法拿到浏览器窗口大小
var w= document.body.clientWidth || document.documentElement.clientWidth;
var h= document.body.clientHeight || document.documentElement.clientHeight
console.log("w: "+ w,"h: "+h);
function gatW(){
return window.innerWidth ||document.body.clientWidth || document.documentElement.clientWidth;
}

window.outerHeight和window.outerWidth获取到浏览器整个窗口的大小包括工具栏，滚动条等

console.log(window.outerHeight);
console.log(window.outerWidth);

window.pageXOffset和window.pageYOffset用于获取文档向下滚动的距离(即滚动条的位置)

console.log(window.pageXOffset);
console.log(window.pageYOffset);

window.screenLeft和window.screenTop获取到浏览器到屏幕左上角的距离，不兼容火狐

火狐：window.screenX和window.screenY来获取

console.log(window.screenLeft);
console.log(window.screenTop);

通过类名获取元素

var btn1 =document.getElementsByClassName("btn1")[0];
btn1.addEventListener("click",function(){
history.back();
})

navigator对象

用来获取浏览器的信息

appCodeName:浏览器代码名

appName：浏览器名称

appVersion：浏览器版本号

platform：可以获取到浏览器操作系统平台

console.log(window.navigator);

screen对象

availWidth和availHeigth屏幕可用区域的宽高(不包括工具栏)

width和height屏幕的宽高

console.log(screen.availHeight);
console.log(screen.availWidth);
console.log(screen.width);
console.log(screen.height);
var btn=document.querySelector(".btn");
btn.addEventListener("click",function(){
history.go(-2);
})

history对象

获取历史记录

length:获取到历史访问页面的个数

( 在一条链上访问的页面个数)

back()；返回上一页

forward()；下一页

go(url/num);可用跳转到具体的某个页面

-1:上一个页面

1：下一个页面

console.log(history.length);
//var btn=document.getElementsByClassName("btn")[0];
var btn=document.querySelector(".btn");
btn.addEventListener("click",function(){
history.forward();
})

<a href="#to">测试锚点</a>

<div class="btn">按钮</div>

<form action="" method="get">
<input type="text" name="username"  value="1234" />
<input type="text" name="pw"value="12345697" />
<input type="submit" value="提交"/>
</form>

<div id="sub">
获取内容
</div>

location对象

用来获取地址栏信息

属性(可读可写)

hash：获取锚点信息

search：获取？后面的内容

host:获取主机名和端口号

hostname:返回当前的主机名

href:返回完整的URL地址

pathname:返回当前页面的URL路劲部分

port：端口号

protocol：返回当前URL的协议

var btn=document.querySelector(".btn");
btn.addEventListener("click",function(){
console.log(location.hash);
})
var sub=document.getElementById("sub");
sub.addEventListener("click",function(){
console.log(location.search);
})
console.log(location.host);
console.log(location.hostname);
console.log(location.href);
//location.href="4、History对象.html";
console.log(location);

cookie对象

用来存储web端用户信息的，信息是直接存储到用户的硬盘里面的

生命周期：

没有设置过期时间，浏览器关闭就清除

设置了过期时间，到达设置的时间后就清除cookie

cookie存储大小为4k

cname:是自己设置的cookie的名字

cvalue：用户传入的值

exdays：设置的过期时间

设置cookie

function setCookie(cname,cvalue,exdays){
var data =new Date();
data.setTime(data.getTime()+(exdays*24*60*60*1000));
console.log(data);
console.log(data.toGMTString());
//计算过期时间
var expires="expires="+data.toGMTString();
//设置cookie
document.cookie=cname + "="+ cvalue+";"+expires;
}
//获取cookie的内容
function getcookie(){
var username=document.cookie;
console.log(username);
var arr= username.split("=");
console.log(arr);
return arr[1];
}
//检测是否已有cookie
function checkcookie(){
var data=getcookie();
if(data!="" && data!=null && data!="null"){
alert("欢迎"+data+"回来！");
}else{
var user=prompt("请输入用户名");
setCookie("username",user,7);
}
}
checkcookie();

html5本地存储

用于本地存储用户浏览器信息

可以存储大量的数据，而不影响性能

存储大小可达5M。

localStorage：长久保存网站的数据，保存数据没有过期时间，直到手动清除

sessionStorage：临时保存数据，当浏览器关闭或者窗口关闭数据就会被清除掉

方法：

setItem(key，value)；键名：键值 设置缓存

getItem(key)；获取缓存

siteName:设置缓存，自己就代表键名。

removeItem(key)；移除缓存

clear();清空所有缓存

localStorage.setItem("username","css");
localStorage.setItem("pw","1234");
localStorage.setItem("sex","nan");
console.log(localStorage.getItem("username"));
localStorage.siteName="html";
localStorage.siteName="javaScript";
console.log(localStorage.siteName);
//console.log(localStorage.removeItem("username"));
//console.log(localStorage.removeItem("siteName"));
//	localStorage.clear();
console.log(localStorage.key(1));//
//可以通过key()方法遍历输出缓存内容
for (var i=0;i<localStorage.length;i++) {
document.write(localStorage.key(i)+":"+localStorage.getItem(localStorage.key(i)));
document.write("<br />");
}