1、BOM 簡介
所謂的 BOM 即瀏覽器對象模型（Browser Object Model）。BOM 賦予了 JS 操作瀏覽器的能力，即 window 操作。DOM 則用於創建刪除節點，操作 HTML 文檔。BOM 尚無正式的標準，導致各瀏覽器對於 BOM 方法的支持各有不同，因此需要具體問題具體對待。
2、window 對象
window 對象是 BOM 的核心，window 對象指當前的瀏覽器窗口。所有 JS 全局對象、函數以及變量都屬於 window 對象。全局變量是 window 對象的屬性。全局函數是 window 對象的方法。甚至 DOM 的 document 也屬於 window 對象的屬性之一，只是大多數情況下可以忽略不寫。
window 對象方法：
| 方法 | 描述 |
| alert() | 彈出帶有文本消息和一個確認按鈕的警告框 |
| prompt() | 彈出可提示用戶輸入的對話框 |
| confirm() | 彈出帶有文本消息及確認按鈕和取消按鈕的對話框 |
| open() | 打開一個新的瀏覽器窗口 |
| close() | 關閉瀏覽器窗口 |
| print() | 打印當前窗口的內容 |
| focus() | 把鍵盤焦點給予一個窗口 |
| blur() | 把鍵盤焦點從頂層窗口移開 |
| moveBy(xnum, ynum) | 相對窗口的當前座標將對象移動指定的像素 |
| moveTo(x, y) | 把窗口的左上角移動到一個指定的座標 |
| resizeBy(w, h) | 按照指定的像素調整窗口的大小 |
| resizeTo(w, h) | 將窗口的大小調整到指定的寬度和高度 |
| scrollBy(xnum, ynum) | 按照指定的像素值來滾動內容 |
| scrollTo(x, y) | 將內容滾動到指定的座標 |
| setInterval() | 每隔指定的時間執行代碼 |
| setTimeout() | 在指定的延遲時間之後來執行代碼 |
| clearInterval() | 取消 setInterval() 的設置 |
| clearTimeout() | 取消 setTimeout() 的設置 |
3、窗口操作
(1)、打開窗口
open() 方法可用於打開新窗口。
語法：window.open(url, name/target, 窗口設置, replace)
該方法的三個參數都是可選的，默認在新頁面打開一個空白頁。第一個參數可設置要打開窗口的路徑。第二個參數規定在何處打開新窗口，也可用於指定窗口的名稱。第三個參數設置窗口參數，多個參數可用逗號分隔。如果有第一個參數，後面兩個參數可省略，則在新頁面打開。第二個參數一般無需設置，如果要規定窗口的參數，則必須有第二個參數，必須爲 '_blank'，或者用 '', 代替，並且距離屏幕頂部不能爲 0，否則失效，如果設置了左邊距離，頂部可設置爲 0。最後一個參數規定加載到窗口的 URL 是在窗口的瀏覽歷史中創建一個條目，還是替換瀏覽器歷史中的當前條目，值爲 true 或 false， 值爲 true 時 URL 替換瀏覽歷史中的當前條目，爲 false 時 URL 在瀏覽歷史中創建新的條目。
下表是一些常用的窗口設置參數：
| 參數 | 值 | 說明 |
| top | Num | 新窗口距屏幕頂部的距離 |
| left | Num | 新窗口距屏幕左端的距離 |
| width | Num | 新窗口的寬度 |
| height | Num | 新窗口的高度 |
| menubar | yes/no/1/0 | 窗口是否有菜單欄，默認是yes |
| scrollbars | yes/no/1/0 | 窗口是否有滾動條，默認是yes |
| toolbar | yes/no/1/0 | 窗口是否有工具欄，默認是yes |
| status | yes/no/1/0 | 窗口是否有狀態欄，默認是yes |
| location | yes/no/1/0 | 窗口是否顯示地址欄，默認是yes |
| resizable | yes/no/1/0 | 是否允許改變窗口大小，默認是yes |
| directories | yes/no/1/0 | 是否添加目錄按鈕，默認是yes |
實例：點擊按鈕，在新窗口打開百度首頁，寬 600，高 400，距屏頂 0 像素，屏左 10 像素。
<body> <input type="button" onClick="newWin()" value="點擊我，打開新窗口!"> <script> function newWin(){ window.open('http://www.baidu.com', '_blank', 'width=600,height=400,top=0,left=10'); } </script> </body>
該實例在 IE 下並不會打開一個自定義的窗口，而是新打開一個標籤頁。
如果在腳本中直接打開新窗口，在 Chrome 和 FF 下會被當作廣告彈窗直接攔截，但是在 IE 下可以正常顯示。360 瀏覽器的極速模式使用的是 Chrome 的內核，兼容模式則使用的 IE 內核，360 瀏覽器使用人羣相對較多，這裏就不描述了，只要其餘瀏覽器正常運行，他就沒什麼問題。
<script> window.open(); window.open('http://baidu.com'); </script>
實例：獲得焦點和失去焦點
<body> <input type="button" value="獲得焦點" onclick="openWin()"> <script> //確保新的窗口獲得焦點： function openWin(){ var oGet = window.open('', '', 'width=400,height=400'); oGet.document.write('<p>我是新打開的窗口</p>'); oGet.focus(); } </script> <input type="button" value="失去焦點" onclick="newWin()"> <script> //確保新的窗口沒有獲得焦點： function newWin(){ var lose = window.open('', '', 'width=400,height=300'); lose.document.write('<p>我是新打開的窗口</p>'); lose.blur(); } </script> </body>
實例：返回新打開窗口的名稱
<body> <input type="button" value="打開" onclick="openWin()"> <script> function openWin(){ var newWin = window.open('', 'newWindow', 'width=400,height=300'); newWin.document.write('<p>新窗口名稱：' + newWin.name + '</p>'); } </script> </body>
實例：打開新窗口向父窗口傳遞信息
<body> <input type="button" value="打開" onclick="openWin()"> <script> function openWin(){ var newWin = window.open('', '', 'width=400,height=300'); newWin.document.write('<p>關閉我之後會向父窗口輸入文本信息</p>'); newWin.focus(); newWin.opener.document.write('<p>我是父窗口，加載完成後，向我輸出內容會覆蓋我所有內容</p>'); } </script> </body>
實例：指定窗口大小、移動窗口和滾動內容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript實例</title> </head> <body> <br><br> <h4>用指定像素調整窗口大小：</h4> <input type="button" value="打開" onclick="openWin()"><br><br> <input type="button" value="調整" onclick="byWin()"> <script> var w; function openWin(){ w=window.open('', '', 'width=100,height=100,top=10'); w.focus(); } function byWin(){ //如果不使用框架，可使用window代替top w.top.resizeBy(500,500); w.focus(); } </script> <h4>將窗口的大小調整到指定的寬度和高度：</h4> <input type="button" value="打開" onclick="newWin()"><br><br> <input type="button" value="調整" onclick="toWin()"> <script> var w; function newWin(){ w=window.open('', '', 'width=100,height=100'); w.focus(); } function toWin(){ w.resizeTo(500,500); w.focus(); } </script> <h4>相對於當前位置移動新窗口：</h4> <input type="button" value="打開" onclick="oWin()"><br><br> <input type="button" value="多移動幾下" onclick="moveWin()"> <script> var w; function oWin(){ w = window.open('', '', 'width=100,height=100'); } function moveWin(){ w.moveBy(200,200); w.focus(); } </script> <h4>移動新窗口到指定位置：</h4> <input type="button" value="打開" onclick="nWin()"><br><br> <input type="button" value="移動" onclick="moveToWin()"> <script> var w; function nWin(){ w=window.open('', '', 'width=400,height=300'); } function moveToWin(){ w.moveTo(0,0); w.focus(); } </script> <h4>由指定的像素數滾動內容：</h4> <input type="button" style="position:fixed;top:0;" onclick="scrollWin()" value="由指定的像素數滾動內容"> <script> function scrollWin(){ window.scrollBy(10,10); } </script> <h4>滾動到指定內容處：</h4> <input type="button" onclick="scrollWindow()" value="滾動到指定內容處"> <script> function scrollWindow(){ window.scrollTo(10,50); } </script> <br><br><br><br><br><br> </body> </html>
方法解析：
resizeBy(w, h)：根據指定的像素來調整窗口的大小。該方法定義指定窗口的右下角移動的像素，左上角將不會被移動(它停留在其原來的座標)。
該方法有兩個參數，第一個參數是必需的，指定窗口寬度增加的像素數。第二個參數可選，指定窗口高度增加的像素數。兩個參數可爲正數，也可爲負數。
resizeTo(w, h)：用於把窗口大小調整爲指定的寬度和高度。
該方法兩個參數都是必需的，用來指定設置窗口的寬度和高度，以像素計。
moveBy(xnum, ynum)：可相對窗口的當前座標把它移動指定的像素。
該方法有兩個參數，第一個參數指定要把窗口右移的像素數，第二個參數指定要把窗口下移的像素數。
moveTo(x, y)：可把窗口的左上角移動到一個指定的座標。
該方法有兩個參數，第一個參數指定窗口新位置的 x 座標，第二個參數指定窗口新位置的 y 座標。
scrollBy(xnum, ynum)：可把內容滾動指定的像素數。
該方法有兩個必需參數，第一個參數指定把文檔向右滾動的像素數。第二個參數指定把文檔向下滾動的像素數。
scrollTo(x, y)：可把內容滾動到指定的座標。
該方法有兩個必需參數，第一個指定要在窗口文檔顯示區左上角顯示的文檔的 x 座標。第二個參數指定要在窗口文檔顯示區左上角顯示的文檔的 y 座標。
實例：打印當前頁面
<body> <input type="button" value="打印當前頁面" onclick="printpage()"> <script> function printpage(){ window.print(); } </script> </body>
(2)、關閉窗口
window.close() 方法可用於關閉當前窗口。
//點擊按鈕關閉當前窗口 <input type="button" value="關閉窗口" onclick="window.close()">
該方法在 Chrome 下運行正常。IE 下彈窗提示：你查看的網頁正在試圖關閉選項卡，是否關閉選項卡？點擊否，不關閉，點擊是，關閉窗口。在 FF 下會報錯，因爲在 FF 下不允許腳本關閉非腳本打開的窗口，也就是不能關閉一個用戶自己打開的窗口，只能關閉由 open 打開的窗口。所以可以先用 open 打開，再關閉，這樣就能解決 FF 下不能關閉的問題。這就需要創建兩個文檔來演示該問題：第二個文檔使用上面實例保存爲 close.html，第一個文檔如下：
//先用open打開保存的文檔，然後再點擊關閉窗口按鈕，效果就達到了 <input type="button" value="打開窗口" onclick="window.open('close.html');">
FF 瀏覽器的安全機制比較高，不能關閉用戶打開的窗口，在網上也沒找有找到什麼好的辦法，只能修改瀏覽器的默認配置，顯然這是不可取的。上面的辦法比較笨，另闢蹊蹺不能關閉用戶打開的，那就自己 open 一個再 close，但這還是比較實在的方法，至少目的是達到了。
在 IE 下可使用下面的代碼關閉當前窗口，不彈窗提示。同時也適用於 Chrome。這裏使用 a 標籤在 FF 下可以看到報錯，使用按鈕則沒有報錯信息。
<a href="javascript:window.opener=null;window.open('', '_self');window.close();">關閉</a>
實例：關閉新打開的窗口
<body> <input type="button" value="打開" onclick="openWin()"> <input type="button" value="關閉" onclick="closeWin()"> <script> function openWin(){ newWin = window.open('http://www.baidu.com', '', 'width=400,height=300,top=200'); } function closeWin(){ newWin.close(); } </script> </body>
實例：檢查新窗口是否已關閉
<body> <input type="button" value="打開'" onclick="openWin()"> <input type="button" value="關閉" onclick="closeWin()"> <input type="button" value="是否關閉" onclick="checkWin()"> <p id="p1"></p> <script> var newWin; function openWin(){ newWin = window.open('', '', 'width=400,height=300,top=200'); } function closeWin(){ if(newWin){ newWin.close(); } } var oP = document.getElementById('p1'); function checkWin(){ if(!newWin){ oP.innerHTML = '新窗口還沒被打開！'; } else{ if(newWin.closed){ oP.innerHTML = '新窗口已關閉！'; } else{ oP.innerHTML = '新窗口未關閉！'; } } } </script> </body>
4、瀏覽器信息
window.navigator 對象獲取包含有關訪問者瀏覽器的信息。該屬性在使用時可以不加 window 前綴。
<body> <div id="div1"></div> <script> txt = '<p>Browser CodeName（瀏覽器代碼名稱）: ' + navigator.appCodeName + '</p>'; txt+= '<p>Browser Name（瀏覽器名稱）: ' + navigator.appName + '</p>'; txt+= '<p>Browser Version（瀏覽器版本）: ' + navigator.appVersion + '</p>'; txt+= '<p>Cookies Enabled（啓用Cookies）: ' + navigator.cookieEnabled + '</p>'; txt+= '<p>Platform（操作平臺）: ' + navigator.platform + '</p>'; txt+= '<p>User-agent header（由客戶機發送服務器的 user-agent 頭部信息）: ' + navigator.userAgent + '</p>'; txt+= '<p>User-agent language（客戶機代理語言）: ' + navigator.systemLanguage + '</p>'; document.getElementById('div1').innerHTML=txt; </script> </body>
其中最常用的屬性是 navigator.userAgent，返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)，是識別瀏覽器的關鍵，可用於獲取當前瀏覽器版本信息，判斷瀏覽器的類型。
<script> document.write(navigator.userAgent); </script>
實例：簡單的判斷瀏覽器類型
<script>
document.write('操作平臺：' + navigator.platform);
function userBrowser(){
var name = window.navigator.userAgent;
//IE瀏覽器
//判斷IE和非IE可以使用ActiveXObject，只有IE支持該對象
//在IE中window.ActiveXObject返回一個對象，則判斷爲true
//其他瀏覽器都返回undefine，兩個否返回false，進入或判斷，也返回false
if(!!window.ActiveXObject || 'ActiveXObject' in window){
return 'IE瀏覽器';
}
//FF瀏覽器
else if(name.indexOf('Firefox') > -1){
return 'Firefox瀏覽器';
}
//Chrome瀏覽器
else if(name.indexOf('Chrome') > -1){
return 'Chrome瀏覽器';
}
//Opera瀏覽器
else if(name.indexOf('Opera') > -1){
return 'Opera瀏覽器';
}
//Safari瀏覽器
else if(name.indexOf('Safari') > -1){
return 'Safari瀏覽器';
}
else{
return 'unknow';
}
}
alert('瀏覽器類型爲：' + userBrowser());
</script>
5、頁面地址
window.location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面，簡單說就是可以給賦值，像使用 open 一樣。
語法：location.[屬性|方法]
<script> //當前頁面URL。若中間出現亂碼百分號是中文轉碼後的顯示。 document.write(window.location); </script> <input type="button" value="點擊查看" onclick="window.location='http://www.baidu.com','_blank'"> </body>
location 對象其他應用：
(1)、location對象屬性
location.hash 設置或返回從井號(#)開始的 URL（錨）。
location.href 設置或返回完整的 URL。
location.pathname 設置或返回當前 URL 的路徑部分。
location.host 設置或返回主機名和當前 URL 的端口號。
location.hostname 設置或返回當前 URL 的主機名，不包含端口。
location.port 設置或返回當前 URL 的端口號 （80 或 443）。
location.protocol 返回所使用的 web 協議（http:// 或 https://）。
location.search 設置或返回從問號(?)開始的 URL（查詢部分）。
(2)、location對象方法
實例：加載一個新文檔
<input type="button" value="點擊加載" onclick="newDoc()"> <script> function newDoc(){ window.location.assign('http://www.baidu.com') } </script>
實例：重新載入當前文檔
<input type="button" value="點擊載入" onclick="reloadPage()"> <script> function reloadPage(){ location.reload() } </script>
實例：用新的文檔替換當前文檔
<input type="button" value="點擊替換" onclick="replaceDoc()"> <script> function replaceDoc(){ window.location.replace('http://www.baidu.com') } </script>
6、瀏覽器尺寸
window.screen 對象用於獲取用戶的屏幕信息。在使用時候可以不加 window 前綴。
(1)、屏幕分辨率的寬度和高度
screen.colorDepth 返回用戶瀏覽器表示的顏色位數，通常爲32位（每像素的位數）。
screen.width 和 screen.height 返回屏幕分辨率的寬度和高度。
<script> document.write( '屏幕寬度：' + screen.width + 'px' ); document.write('<br>'); document.write( '屏幕高度：' + screen.height + 'px' ); </script>
(2)、可用寬度和高度
screen.availWidth 和 screen.availHeight 返回窗口可以使用的屏幕寬度和高度，不包括窗口任務欄。
不同系統的窗口任務欄默認高度不一樣，任務欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度也不一樣。
<script>
document.write('可用寬度：' + screen.availWidth +'px');
document.write('<br>');
document.write('可用高度：' + screen.availHeight +'px');
</script>
7、工作區尺寸
(1)、可視區寬度和高度
獲取瀏覽器窗口尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法:
①、IE9 以上及現在瀏覽器都支持：
window.innerWidth 獲取瀏覽器窗口的內部寬度。
window.innerHeight 獲取瀏覽器窗口的內部高度。
②、對於IE9之前可以用：
document.documentElement.clientWidth 表示 HTML 文檔所在窗口的當前寬度。
document.documentElement.clientHeight 表示 HTML 文檔所在窗口的當前高度。
或者可以使用：
Document 對象的 body 屬性對應 HTML 文檔的 <body> 標籤
document.body.clientWidth
document.body.clientHeight
在不同瀏覽器都可以使用的兼容寫法：
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
<script> //對於IE9+、Chrome、Firefox、Opera 以及 Safari： document.write('可視寬爲：' + window.innerWidth + '<br>'); document.write('可視高爲：' + window.innerHeight + '<br>' + '<br>'); document.write('可視寬爲：' + document.documentElement.clientWidth + '<br>'); document.write('可視高爲：' + document.documentElement.clientHeight + '<br>' + '<br>'); //注意該方法返回的數值與其他不同 document.write('可視寬爲：' + document.body.clientWidth + '<br>'); document.write('可視高爲：' + document.body.clientHeight + '<br>' + '<br>'); var w = document.documentElement.clientWidth || document.body.clientWidth; var h = document.documentElement.clientHeight || document.body.clientHeight; document.write('可視寬爲：' + w + '<br>' + '可視高爲：' + h); </script>
(2)、實際網頁尺寸
scrollHeight 和 scrollWidth，獲取網頁內容高度和寬度。
scrollHeight 和 scrollWidth 還可獲取 DOM 元素中內容實際佔用的高度和寬度。
在 IE 下 scrollHeight 是網頁內容實際高度，可以小於 clientHeight。在 FF 下 scrollHeight 是網頁內容高度，不過最小值是 clientHeight。也就是說網頁內容實際高度小於 clientHeight 時，scrollHeight 返回 clientHeight 。
在不同瀏覽器都可以使用的兼容寫法：
var w =document.documentElement.scrollWidth || document.body.scrollWidth;
var h =document.documentElement.scrollHeight || document.body.scrollHeight;
<script> //兼容性寫法 var w = document.documentElement.scrollWidth || document.body.scrollWidth; var h = document.documentElement.scrollHeight || document.body.scrollHeight; document.write('網頁內容寬爲：' + w + '<br>' + '網頁內容高爲：' + h); </script>
(3)、包含滾動條的網頁尺寸
offsetHeight 和 offsetWidth，獲取網頁內容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。
offsetHeight = clientHeight(內容可視區高度) + 滾動條 + 邊框。
<script> //兼容性寫法 var w = document.documentElement.offsetWidth || document.body.offsetWidth; var h = document.documentElement.offsetHeight || document.body.offsetHeight; document.write('網頁內容寬爲：' + w + '<br>' + '網頁內容高爲：' + h); </script>
(4)、滾動距離
所謂滾動距離，就是可視區距離頁面頂部滾動了多遠，也叫網頁捲去的距離。
scrollTop：設置或獲取位於對象最頂端與窗口中可見內容的最頂部之間的距離 ，也就是網頁被滾動的高度。
scrollLeft：設置或獲取位於給定對象左邊界與窗口中目前可見內容的最左端之間的距離，也就是網頁被滾動的寬度。
offsetTop：獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算頂部位置，當前對象到其上級頂部的距離，或者距離頁面頂部的距離。
offsetLeft：獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置 ，當前對象到其上級左端的距離，或者距離頁面左端的距離。
offsetTop 和 offsetLeft 不能賦值，設置對象到頁面頂部的距離可用 style.top 屬性，設置對象到頁面左部的距離請用 style.left 屬性。
offsetParent：頁面中設置 postion 屬性(relative、absolute、fixed)的父容器，從最近的父節點開始，一層層向上找，直到 HTML 的 body。該屬性用於獲取一個元素用於定位的父級，語法：obj.offsetParent
實例：滾動頁面，點擊頁面查看滾動距離
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript實例</title> <script> //幾款瀏覽器每次滾動，距離頂部的距離都不一樣： //在Chrome爲100：0-100-200-300-400-500。都是整數遞進。 //而在FF下則爲132：0-132-264-396-528。每次遞進132。 //而在IE下則爲62：0-62-124-186-248。每次遞進則爲62。 window.onload = function (){ document.onclick = function (){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; alert(scrollTop); }; }; </script> </head> <body style="height:2000px"> </body> </html>
該知識點相當重要，而且內容比較混亂，不容易理解，需要做大量練習，鞏固所學。
8、瀏覽器歷史記錄
window.history 對象記錄了用戶曾經瀏覽過的頁面(URL)，並可以實現瀏覽器前進與後退導航的功能。從窗口被打開的那一刻開始記錄，每個瀏覽器窗口、每個標籤頁乃至每個框架，都有自己的 history 對象與特定的 window 對象關聯。在使用時可以不加 window 前綴。
語法：window.history.[屬性|方法]
(1)、History 對象屬性
歷史記錄不唯一，所以該對象具有 length 屬性，可返回瀏覽器歷史列表中的 URL 數量。
(2)、History 對象方法
①、history.back() 加載 history 列表中的前一個URL，就是返回前一個頁面，與瀏覽器點擊後退按鈕功能相同。
該方法等同於：history.go(-1);
②、history.forward() 加載 history 列表中的下一個 URL。就是返回下一個頁面，與瀏覽器的前進按鈕功能相同。
該方法等同於：history.go(1);
③、history.go(num) 根據當前所處的頁面，加載 history 列表中的某個具體的頁面。
參數說明：1 爲前一個，go(1 等價 forward()。0 爲當前頁面。-1 下一個頁面，後一個，go(-1) 等價 back()。
也可爲其他數值，指定要訪問的 URL 在 History 的 URL 列表中的相對位置。
比如：history.go(-2); 返回當前頁面之前瀏覽過的第二個歷史頁面，相當於點擊2次後退按鈕。
history.go(3); 返回當前頁面之後瀏覽過的第三個歷史頁面。
9、Cookie
Cookie 用於存儲 web 頁面的用戶信息。就是一些數據，比如自動登錄和記住用戶名，存儲在用戶電腦上的文本文件中，方便再次使用。當 web 服務器向瀏覽器發送 web 頁面時，在連接關閉後，服務端不會記錄用戶的信息。Cookie 的作用就是用於解決 "如何記錄客戶端的用戶信息"：當用戶訪問 web 頁面時，他的名字可以記錄在 cookie 中。在用戶下一次訪問該頁面時，可以在 cookie 中讀取用戶訪問記錄。
cookie 是以域名爲單位的，同一個網站中所有頁面共享一套cookie，一般不會超過 50 條，大小爲 4k-10k 左右。限制數量和存儲大小，這樣也阻止了惡意網站給 cookie 中惡意存儲，不然一會計算機硬盤就滿了。cookie 也是有過期時間的，比如網頁中的自動登錄，有些爲 2 周內，有些爲 1 周內，當然過期時間是可以自行定義的，用戶也可以自行清理。
在 JS 中使用 cookie 很簡單，就是 document.cookie 該屬性可用來創建、讀取和刪除 cookie。
語法：名稱 = 值
當瀏覽器從服務器上請求 web 頁面時， 屬於該頁面的 cookie 會被添加到該請求中。服務端通過這種方式來獲取用戶的信息。
提示：跟 cookie 相關的本地測試最好都用 FF，只有 FF 會保存本地的 cookie，其他瀏覽器都不會保存。在 IE 下也可以測試。
FF 下查看方法：可點擊頁面右鍵 - 查看頁面信息 - 安全 - 查看cookie，空白的文件夾就是本地的 cookie。
(1)、創建和讀取cookie
默認情況下，cookie 屬於當前頁面並在瀏覽器關閉時刪除。
ccokie 中的 = 不是賦值，而是添加，可多次添加，並不會發生後面將前面覆蓋的情況。
expires：有效日期，用於指定 cookie 的過期時間。如過不設置，瀏覽器關閉時 cookie 就被刪除了。
path：可用於設置 cookie 的路徑。
cookie 可直接被讀取，或者存儲與變量中。
document.cookie 將以字符串的方式返回所有的 cookie，格式： cookie1=value; cookie2=value; cookie3=value;
實例：創建用戶登錄信息，設置 2 周後過期，並讀取 cookie
<script> var oD = new Date(); //從當天起14天也就是2周後是幾號 oD.setDate(oD.getDate() + 14); //設置過期時間2周。可在查看cookie中看到user的過期時間爲2周後 document.cookie = 'user=小白;expires=' + oD; //瀏覽器關閉刪除本條cookie。pass的過期時間爲在會話結束時。 document.cookie = 'pass = 123456'; //讀取cookie alert(document.cookie); </script>
(2)、修改cookie
修改 cookie 類似於創建 cookie，新的 cookie 會覆蓋舊的 cookie，其實並不能說是被覆蓋了，而是新的 cookie 將被添加到 document.cookie 中顯示。
<script> var oD = new Date(); oD.setDate(oD.getDate() + 14); document.cookie = 'user=小白;expires=' + oD; document.cookie = 'pass=123456'; //可在查看cookie中看到user和pass的內容都被新的cookie替換了 document.cookie = 'user=小明;expires=' + oD; document.cookie = 'pass=654321'; //讀取cookie alert(document.cookie); </script>
(3)、刪除cookie
刪除 cookie 非常簡單。只需要設置 expires 參數爲以前的時間即可，也就是設置爲 -1，昨天過期，瀏覽器一看這不是已經過期了麼，直接刪除。
下面是設置、獲取和刪除 cookie 的封裝函數，方便以後使用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cookie封裝函數</title> </head> <body> <script> //設置cookie //參數1:cookie的名字，參數2：cookie的值，參數3：cookie過期時間 function setCookie(name, value, iDay){ var oDate = new Date(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name + '=' + value + '; expires =' + oDate; } //userName一年後過期，passWord兩週後過期。 setCookie('userName', '小白', 365); setCookie('passWord', '123456', 14); //獲取cookie //參數爲cookie的名稱 function getCookie(name){ //用字符串將cookie分割，注意要用：默認的cookie樣式，分號加空格。 var arr = document.cookie.split('; '); for(var i=0; i<arr.length; i++){ //默認字符串顯示爲：a=5; b=12; c=21 //所以用等號再做一次分隔 var result = arr[i].split('='); //result的第一位存名稱 //如果第一位等於name，就說明找到想要的了,就返回第二位的值。 if(result[0] == name){ //result的第二位存值 return result[1]; } } //如果沒有cookie就返回一個空字符串。比如有些用戶是第一次進入網站，就沒有產生cookie。 return ''; } //獲取cookie中passWord的值 alert(getCookie('passWord')); //參數爲刪除哪條cookie function removeCookie(name){ //參數1：cookie的值，1表示隨便一個。參數3：昨天過期，立馬刪除。 setCookie(name, 1, -1); } //將cookie中userName和passWord刪除。 //在點擊查看頁面信息，之前保存的cookie就不存在了。 removeCookie('userName'); removeCookie('passWord'); </script> </body> </html>
(4)、cookie 小應用：記住上一次的用戶名
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>記住上一次的用戶名</title> <script> function setCookie(name, value, iDay){ var oDate = new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie = name + '=' + value + '; expires =' + oDate; } function getCookie(name){ var arr = document.cookie.split('; '); for(var i=0; i<arr.length; i++){ var result = arr[i].split('='); if(result[0] == name){ return result[1]; } } return ''; } function removeCookie(name){ setCookie(name, 1, -1); } window.onload = function (){ var oForm = document.getElementById('form1'); var oUser = document.getElementsByName('user')[0]; //在點擊提交按鈕時發生的事件 oForm.onsubmit = function (){ //創建一個cookie，值爲用戶名輸入的值，14天后過期 setCookie('user', oUser.value, 14); }; //用戶名的值爲獲取cookie中的user oUser.value = getCookie('user'); }; </script> </head> <body> //index.html爲本文檔文件名 <form id="form1" action="index.html"> 用戶名：<input type="text" name="user"><br> 密 碼：<input type="password" name="pass"><br> <input type="submit" name="" value="登錄"> </form> </body> </html>