一、BOM介绍
浏览器对象模型BOM(Browser Object Model)提供了独立于内容的,可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中Window对象是BOM的顶层对象,其他对象(包括DOM的docunment对象)都是该对象的子对象。
全局变量是window对象的属性,全局函数是window对象的方法。
二、Location对象
window.location可以不使用window前缀。
常用对象示例:(当前页面URL为:http://127.0.0.1:8000/index/test)
location.href // 返回当前页面的href:http://127.0.0.1:8000/index/test
location.hostname // 返回web主机的域名:127.0.0.1
location.pathname // 返回当前页面的路径或文件名:/index/test
location.protocol // 返回使用的web协议:http:
location.port // 返回web主机的端口号:8000
location.search // 返回当前url的查询部分,以?开头
常用方法:
location.assign() // 加载新文档
location.reload() // 重新加载当前文档(刷新)
location.replace() // 载入新的文档替换当前文档
三、History对象
属性:
window.history.length // 返回在历史列表中的网址数量
方法:
window.history.back() // 访问前一个记录
window.history.foward() // 访问下一个记录
window.history.go(n) // 加载历史列表的某个具体页面,如go(-2)后退两页,go(+3)前进3页
四、存储对象
4.1、window.sessionStorage
在浏览器中存储key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
sessionStorage.setItem("name", "zhangsan"); // 存储
// Chrome为例,设置后可以在Application->Session Storage中看到。
var name = sessionStorage.getItem("name"); // 获取
sessionStorage.removeItem("name"); // 删除
sessionStorage.clear(); // 删除全部
4.2、window.localStorage
在浏览器中存储key/value对,无过期时间,直到手动去删除。用于长久保存整个网站的数据
localStorage.setItem("name", "zhangsan"); // 存储
// Chrome为例,设置后可以在Application->Local Storage中看到。
var name = localStorage.getItem("name"); // 获取
localStorage.removeItem("name"); // 删除
localStorage.clear(); // 清除全部
获取键:
console.log(localStorage); // {age: '18', name: 'zhangsan'}
for(var i = 0; i < localStorage.length; i++){
console.log(localStorage.key(i));
} // 'age' 'name'
存储json对象:
var obj = {k1: "v1", k2: "v2"};
localStorage.setItem("obj", JSON.stringify(obj));
五、定时器方法
5.1、setInterVal
间歇调用:
var timeID = setInterval(function, interval)
// 参数1为函数,参数2为间隔的毫秒数,返回值为定时器id
clearInterval(timeID);
// 关闭定时器
示例:
var timeID = setInterval(function() {
console.log("test")
}, 2000); // 每隔2s在控制台输出一次"test"
5.2、setTimeout
超时调用(一次性定时器)
var timeID = setTimeout(function, interval)
// 参数1为函数,参数2为间隔的毫秒数,返回值为定时器id
clearTimeout(timeID);
// 关闭定时器
示例:
var timeID = setTimeout(function() {
console.log("test");
}, 5000); // 5s后在控制台输出"test"
clearTimeout(timeID); // 输出之前关闭定时器,则不会输出