BOM

BOM

• BOM（Browser Object Model）即浏览器对象模型
• BOM提供了独立于内容 而与浏览器窗口进行交互的对象
• 因为BOM主要用于管理窗口与窗口之间的通信，所以其核心对象是window
• BOM由一系列相关的对象构成，而且每一个对象都提供了不少方法与属性
• BOM缺少标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

window对象

window对象是BOM的顶层(核心)对象，全部对象都是经过它延伸出来的，也能够称为window的子对象。

• 全部浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不须要建立对象,直接使用便可.
• 方式1：window.open("http://www.baidu.com","_blank")打开百度
• 方式2：location.href = "http://www.baidu.com" 打开百度
• window.open('about:blank',"_self")打开空白页
• window对象是JavaScript中的顶级对象。
• 全局变量、自定义函数也是window对象的属性和方法。
• window对象下的属性和方法调用时，能够省略window。

location对象

window.location能够简写成location。location至关于浏览器地址栏，能够将url解析成独立的片断。

一、location对象的属性

• href：跳转
• hash 返回url中#后面的内容，包含#
• host 主机名，包括端口
• hostname 主机名
• pathname url中的路径部分
• protocol 协议 通常是http、https
• search 查询字符串

二、location对象的方法

• window.location.reload(); //全局刷新页面，至关于浏览器导航栏上 刷新按钮

navigator对象

window.navigator 的一些属性能够获取客户端的一些信息。

• userAgent：系统，浏览器
• platform：浏览器支持的系统，win/mac/linux

history对象

一、后退：

• history.back()
• history.go(-1)：0是刷新

二、前进：

• history.forward()
• history.go(1)

HTML5 存储技术 localStorage sessionStorage

• 对浏览器来讲，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，并且容量更大，它包含两种：localStorage 和 sessionStorage
• sessionStorage（临时存储） ：为每个数据源维持一个存储区域，在浏览器打开期间存在，包括页面从新加载
• localStorage（长期存储） ：与 sessionStorage 同样，可是浏览器关闭后，数据依然会一直存在
• sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON

1.保存数据到本地
let info = {
    name: 'Lee',
    age: 20,
    id: '001'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));

2.从本地存储获取数据
var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));

3.本地存储中删除某个保存的数据
sessionStorage.removeItem('key');
localStorage.removeItem('key');

4.删除全部保存的数据
sessionStorage.clear();
localStorage.clear();

5.监听本地存储的变化
Storage 发生变化（增长、更新、删除）时的 触发，同一个页面发生的改变不会触发，只会监听同一域名下其余页面改变 Storage

window.addEventListener('storage', function (e) {
        console.log('key', e.key);
        console.log('oldValue', e.oldValue);
        console.log('newValue', e.newValue);
        console.log('url', e.url);
    })

浏览器查看方法：
进入开发者工具
选择 Application
在左侧 Storage 下 查看 Local Storage 和 Session Storage

定时器

• 在js中有两种定时器
• 一次性定时器：只在指定的时间后执行一次 setTimeout()
• 周期性循环定时器: 在指定时间为周期循环执行 setInterval()

//定时器 异步运行  
function hello(){  
alert("hello");  
}  
//使用方法名字执行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  
window.clearTimeout(t1);//去掉定时器


//实时刷新  时间单位为毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查询 */  
function refreshQuery(){  
  console.log('每8秒调一次') 
}