JavaScript中BOM的重要內容總結
一、BOM介紹
BOM（Browser Object Model），瀏覽器物件模型；
用來操作瀏覽器部分功能的API；
BOM由一系列的物件構成，由於主要用於管理視窗和視窗之間的通訊，所以核心物件是window。
二、BOM的結構
BOM中，主要是物件。比如：移動、調整瀏覽器大小的window物件；用於導航的location物件與history物件；獲取瀏覽器、作業系統與使用者螢幕資訊的navigator與screen物件；可以使用document作為訪問HTML文件的入口，管理框架的frames物件等。
三、BOM中的常用物件
3.1 window物件
(1)window物件是BOM的頂層（核心）物件。所有物件都是通過它延伸出來的。
(2)全域性變數、自定義函式也是window物件的屬性和方法。
(3)window物件下的屬性和方法呼叫時，可以省略window。
例如：可以彈出系統對話方塊、開啟（關閉）視窗
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head>7 <body> 8 <!-- 需求： 點選按鈕 開啟新的視窗 路飛學城 --> 9 <!-- a標籤預設是在當前視窗開啟新的網址 --> 10 <a href="http://www.luffycity.com" target="_blank">路飛</a> 11 <button>luffy</button> 12 <script type="text/javascript"> 13 14 var oBtn = document.getElementsByTagName('button')[0]; 15 oBtn.onclick = function(){ 16 // 預設在新的視窗開啟 網址 _blank 17 // window.open('http://www.baidu.com','_self'); 18 // window可以省略不寫 19 open('http://www.baidu.com','_self'); 20 // 關閉視窗 21 // window.close(); 22 } 23 </script> 24 25 </body> 26 </html>
3.2 location物件
window.location可以簡寫成location。location相當於瀏覽器位址列，可以將url解析成獨立的片段。
location物件的屬性部分如下圖：、
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <!-- <form action="https://www.baidu.com/s" target = '_blank'> 9 <input type="text" name="wd" placeholder="請輸入城市"> 10 <input type="submit" value="搜尋"> 11 12 </form> --> 13 <script type="text/javascript"> 14 15 console.log(window.location); 16 17 setTimeout(function(){ 18 19 location.href = 'https://www.baidu.com'; 20 }, 5000) 21 22 </script> 23 24 </body> 25 </html>
3.3 history物件
3.3.1 前進：
history.go(1)
history.forward()
3.3.2 後退
history.gon(-1)
history.back()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <a href="./index.html">新網頁</a> 9 <button id="forward">前進</button> 10 <button id="refresh">重新整理</button> 11 <script type="text/javascript"> 12 alert(1); 13 14 function $(id){ 15 return document.getElementById(id); 16 } 17 18 $('forward').onclick = function(){ 19 20 // 表示前進 21 window.history.go(1); 22 } 23 $('refresh').onclick = function(){ 24 // 表示重新整理 25 26 // 不常用 因為因為全域性重新整理 27 // window.history.go(0); 28 window.location.reload(); 29 // 區域性作用域重新整理 使用的技術 ajax後面 介紹 30 } 31 32 </script> 33 34 </body> 35 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <button id="back">後退</button> 9 <script type="text/javascript"> 10 function $(id){ 11 return document.getElementById(id); 12 } 13 14 $('back').onclick = function(){ 15 16 // 表示後退 17 window.history.go(-1); 18 } 19 20 </script> 21 22 </body> 23 </html>
四、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)監聽本地儲存的變化
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);
})
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <div> 10 <input type="text" name="user" id="user"> 11 <input type="button" id="btn" value="儲存"> 12 </div> 13 14 <ul id="lists"> 15 16 </ul> 17 <button id='clear'>清除</button> 18 <script type="text/javascript"> 19 20 var oBtn = document.getElementById('btn'); 21 var oUser = document.getElementById('user'); 22 var oLists = document.getElementById('lists'); 23 24 var li = document.createElement('li'); 25 26 oBtn.onclick = function(){ 27 28 var val = oUser.value 29 localStorage.setItem('name', val); 30 oUser.value = ''; 31 li.innerHTML = val; 32 oLists.appendChild(li) 33 } 34 35 window.onload = function(){ 36 37 if (localStorage.getItem('name')) { //有值 38 var value = localStorage.getItem('name'); 39 li.innerHTML = value; 40 oLists.appendChild(li); 41 42 } 43 44 // document.getElementById('clear').onclick = function(){ 45 // localStorage.clear(); 46 // window.location.reload(); 47 // } 48 49 document.getElementById('clear').addEventListener('click',function(){ 50 localStorage.clear(); 51 window.location.reload(); 52 },false); 53 54 // removeEventListener(type: DOMString, callback: EventListener, capture?: boolean) 55 } 56 57 // localStorage 58 // var arr = [{"title":"adad","done":false}]; 59 // var name = 'alex' 60 61 </script> 62 </body> 63 </html>
完！