window.onload 和 document.onDOMContentLoaded的區(qū)別

window.onload與document.onDOMContentLoaded都表示當(dāng)頁面加載元素（包括圖片等信息）完畢后執(zhí)行的操作，兩者間的主要差別如下：

1. 當(dāng)window.onload事件需等到頁面上所有的DOM、樣式表、腳本、圖片及flash都已經(jīng)加載完成后觸發(fā)。
2. 當(dāng)document.onDOMContentLoaded事件在DOM加載完成后就會(huì)觸發(fā)，而不必等到樣式表、圖片和flash等元素加載完成之后。

獲取真實(shí)寬高

一、如何獲取圖片的真實(shí)寬高

• 對(duì)于支持HTML5的瀏覽器可以使用naturalWidth/naturalHeight來直接獲取圖片的真實(shí)寬高：

var naturalWidth = document.getElementById('img').naturalWidth,
 naturalHeight = document.getElementById('img').naturalHeight;

• IE7/8中可以使用new Image()來獲?。?/li>

function getNaturalSize (Domlement) {
 var img = new Image();
 img.src = DomElement.src;
 return {
  width: img.width,
  height: img.height
 };
}
 
// 使用
var natural = getNaturalSize (document.getElementById('img')),
 natureWidth = natural.width,
 natureHeight = natural.height;

二、如何獲取元素的真實(shí)寬高

• 使用jquery：

$("#id").height();

• 使用DOM：

document.getElementById("id").style.height (需要這樣設(shè)置才能獲取到高度，<div id="idName" style="height:300px;">);
document.getElementById("id").offsetHeight;
document.getElementById("id").clientHeight; 

• 使用window.getComputedStyle()：

var width = window.getComputedStyle(document.getElementById("id")).width;
var height = window.getComputedStyle(document.getElementById("id")).height;

URL的編碼/解碼方法

URL通過ASCII字符集利用因特網(wǎng)進(jìn)行發(fā)送，其只能使用英文字母、阿拉伯?dāng)?shù)字和某些標(biāo)點(diǎn)符號(hào)，不能使用其他文字和符號(hào)。這意味著如果URL中存在漢字，就必須編碼后才能使用。

"只有字母和數(shù)字[0-9a-zA-Z]、一些特殊符號(hào)"$-_.+!*'(),"[不包括雙引號(hào)]、以及某些保留字，才可以不經(jīng)過編碼直接用于URL。"
JavaScript提供四個(gè)URL的編碼/解碼方法：

1. decodeURI()
2. decodeURIComponent()
3. encodeURI()
4. encodeURIComponent()

區(qū)別

• encodeURI()方法不會(huì)對(duì)下列字符編碼：

1. ASCII字母
2. 數(shù)字
3. ~!@#$&*()=:/,;?+'

• encodeURIComponent()方法不會(huì)對(duì)下列字符編碼

1. ASCII字母
2. 數(shù)字
3. ~!*()'

cookie & session &localStorage

一、cookie

1. cookie是存儲(chǔ)在瀏覽器上的一小段數(shù)據(jù)，用來記錄某些當(dāng)頁面關(guān)閉或者刷新后仍然需要記錄的信息。在控制臺(tái)用 「document.cookie」查看你當(dāng)前正在瀏覽的網(wǎng)站的cookie。
2. cookie可以使用 js 在瀏覽器直接設(shè)置（用于記錄不敏感信息，如用戶名）, 也可以在服務(wù)端通使用 HTTP 協(xié)議規(guī)定的 set-cookie 來讓瀏覽器種下cookie，這是最常見的做法。（打開一個(gè)網(wǎng)站，清除全部cookie，然后刷新頁面，在network的Response headers試試找一找set-cookie吧）
3. 每次網(wǎng)絡(luò)請(qǐng)求 Request headers 中都會(huì)帶上cookie。所以如果 cookie 太多太大對(duì)傳輸效率會(huì)有影響。
4. 一般瀏覽器存儲(chǔ)cookie 最大容量為4k，所以大量數(shù)據(jù)不要存到cookie。
5. 設(shè)置cookie時(shí)的參數(shù)：
   • path：表示 cookie 影響到的路徑，匹配該路徑才發(fā)送這個(gè) cookie。
   • expires 和 maxAge：告訴瀏覽器 cookie 時(shí)候過期，maxAge 是 cookie 多久后過期的相對(duì)時(shí)間。不設(shè)置這兩個(gè)選項(xiàng)時(shí)會(huì)產(chǎn)生 session cookie，session cookie 是 transient 的，當(dāng)用戶關(guān)閉瀏覽器時(shí)，就被清除。一般用來保存 session 的 session_id。
   • secure：當(dāng) secure 值為 true 時(shí)，cookie 在 HTTP 中是無效，在 HTTPS 中才有效。
   • httpOnly：瀏覽器不允許腳本操作 document.cookie 去更改 cookie。一般情況下都應(yīng)該設(shè)置這個(gè)為 true，這樣可以避免被 xss 攻擊拿到cookie。

二、session

當(dāng)一個(gè)用戶打開淘寶登錄后，刷新瀏覽器仍然展示登錄狀態(tài)。服務(wù)器如何分辨這次發(fā)起請(qǐng)求的用戶是剛才登錄過的用戶呢？這里就使用了session保存狀態(tài)。用戶在輸入用戶名密碼提交給服務(wù)端，服務(wù)端驗(yàn)證通過后會(huì)創(chuàng)建一個(gè)session用于記錄用戶的相關(guān)信息，這個(gè) session 可保存在服務(wù)器內(nèi)存中，也可保存在數(shù)據(jù)庫中。

• 創(chuàng)建session后，會(huì)把關(guān)聯(lián)的session_id 通過setCookie 添加到http響應(yīng)頭部中。
• 瀏覽器在加載頁面時(shí)發(fā)現(xiàn)響應(yīng)頭部有 set-cookie字段，就把這個(gè)cookie 種到瀏覽器指定域名下。
• 當(dāng)下次刷新頁面時(shí)，發(fā)送的請(qǐng)求會(huì)帶上這條cookie， 服務(wù)端在接收到后根據(jù)這個(gè)session_id來識(shí)別用戶。

cookie 是存儲(chǔ)在瀏覽器里的一小段「數(shù)據(jù)」，而session是一種讓服務(wù)器能識(shí)別某個(gè)用戶的「機(jī)制」，session 在實(shí)現(xiàn)的過程中需要使用cookie。 二者不是同一維度的東西。

三、localStorage

1. localStorage HTML5本地存儲(chǔ)web storage特性的API之一，用于將大量數(shù)據(jù)（最大5M）保存在瀏覽器中，保存后數(shù)據(jù)永遠(yuǎn)存在不會(huì)失效過期，除非用 js手動(dòng)清除。
2. 不參與網(wǎng)絡(luò)傳輸。
3. 一般用于性能優(yōu)化，可以保存圖片、js、css、html 模板、大量數(shù)據(jù)。

示例代碼

• 判斷用戶的瀏覽器類型：

function isAndroid(){
  return /Android/i.test(navigator.userAgent); 
} 
function isIphone(){
  return /iPhone/i.test(navigator.userAgent); 
} 
function isIpad(){
  return /iPad/i.test(navigator.userAgent);
 } 
function isIOS(){ 
  return /iPad|iPhone|iMac/i.test(navigator.userAgent); }

• 使用 localStorage封裝一個(gè) Storage 對(duì)象，達(dá)到如下效果

Storage.set('name', '饑人谷') 
Storage.set('age', 2, 30) ;  //設(shè)置 name 字段存儲(chǔ)的值為'饑人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'],  60)

Storage.get('name')   // ‘饑人谷’
Storage.get('age')     //  如果不超過30秒，返回?cái)?shù)字類型的2；如果超過30秒，返回 undefined，并且 localStorage 里清除 age 字段
Storage.get('teachers')  //如果不超過60秒，返回?cái)?shù)組； 如果超過60秒，返

解答：

var Storage = (function(){
  return {
    set: function(key, value, expireSeconds){
      localStorage[key] = JSON.stringify({
        value: value, 
        expired: expireSeconds===undefined?undefined:Date.now() + 1000*expireSeconds
      })
    },
    get: function(key){
      if(localStorage[key] === undefined){
        return
      }
      var o = JSON.parse(localStorage[key])
      if(o.expired === undefined || Date.now() < o.expired){
        return o.value
      }else{
        delete localStorage[key]
      }
    }
 }
})()