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秒調一次') 
}