window.onload 和 document.onDOMContentLoaded 有什么區(qū)別碘饼？

• 主要區(qū)別

1. 當(dāng)onload事件觸發(fā)時熙兔，頁面上所有的DOM，樣式表艾恼，腳本住涉，圖片和flash都已經(jīng)加載完成了
2. 當(dāng)onDOMContentLoaded事件觸發(fā)時，僅當(dāng)DOM加載完成钠绍，不包括樣式表舆声，圖片和flash

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

//比如想獲取id為id的元素寬高
window.getComputedStyle(document.getElementByTagname("img")).height;
window.getComputedStyle(document.getElementByTagname("img")).width;

使用getComputedStyle方法的前提是頁面的資源加載完畢 onload 事件觸發(fā)后

如何獲取元素的真實(shí)寬高柳爽？

//比如想獲取id為id的元素寬高
window.getComputedStyle(document.getElementById("id")).height;
window.getComputedStyle(document.getElementById("id")).width;

使用getComputedStyle方法的前提是頁面的DOM結(jié)構(gòu)加載完畢 即onDOMContentLoaded 事件觸發(fā)后

URL 如何編碼解碼媳握？為什么要編碼？

JavaScript提供四個URL的編碼/解碼方法磷脯。

• decodeURI()
• decodeURIComponent()
• encodeURI()
• encodeURIComponent()
  區(qū)別
• encodeURI方法不會對下列字符編碼

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

• encodeURIComponent方法不會對下列字符編碼

1. ASCII字母
2. 數(shù)字
3. ~!*()'
   也就是說encodeURIComponent比encodeURI編碼的范圍更大蛾找。

• 而decodeURI()方法和decodeURIComponent()方法就是上述兩種編碼對應(yīng)的解碼方法。
  舉個例子
• 我們對url https://www.baidu.com/s?wd=洛陽使用encodeURI方法編碼會得到"https://www.baidu.com/s?wd=%E6%B4%9B%E9%98%B3"
• 而如果使用encodeURIComponent方法編碼赵誓，得到https%3A%2F%2Fwww.baidu.com%2Fs%3Fwd%3D%E6%B4%9B%E9%98%B3可以看出與encodeURL方法相比
  ?打毛、=和/均被編碼。解碼時俩功，對https%3A%2F%2Fwww.baidu.com%2Fs%3Fwd%3D%E6%B4%9B%E9%98%B3使用decodeURIComponent方法得到https://www.baidu.com/s?wd=洛陽隘冲，這與對"https://www.baidu.com/s?wd=%E6%B4%9B%E9%98%B3"使用decodeURI方法得到的結(jié)果一致
• 如果編碼方式與解碼方式使用不同的方法，比如編碼使用encodeURI()方法绑雄，而解碼使用decodeURIComponent方法。我們只需記住后者范圍要比前者范圍要寬奥邮，即decodeURIComponent方法可以解碼encodeURI()方法編碼的URL万牺，但是decodeURI方法無法解碼encodeURIComponent方法編碼的URL

用于判斷用戶瀏覽器類型的函數(shù)

function isAndroid(){
    if(navigator.userAgent.search("Android")>(-1)){return "Android瀏覽器"}
    else{return "不是Android瀏覽器"}
}
function isIphone(){
    if(navigator.userAgent.search("iPhone")>(-1)){return "iPhone瀏覽器"}
    else{return "不是iPhone瀏覽器"}
}
function isIpad(){
    if(navigator.userAgent.search("iPad")>(-1)){return "iPad瀏覽器"}
    else{return "不是iPad瀏覽器"}
}
function isIOS(){
    if(navigator.userAgent.search("Safari")>(-1)){return "ios瀏覽器"}
    else{return "不是ios瀏覽器"}
}

使用localStorage封裝一個Storage對象罗珍，使其達(dá)到如下效果：

Storage.set('name', '霸天虎') 
Storage.set('age', 2, 30) ;  //設(shè)置 name 字段存儲的值為'霸天虎'
Storage.set('teachers', ['xiaolong', 'xiaohu', 'xiaoxin'],  60)
Storage.get('name')   // ‘霸天虎’
Storage.get('age')     //  如果不超過30秒，返回?cái)?shù)字類型的2脚粟；如果超過30秒覆旱，返回 undefined，并且 localStorage 里清除 age 字段
Storage.get('teachers')  //如果不超過60秒核无，返回?cái)?shù)組扣唱； 如果超過60秒，返回undefined

• 代碼如下

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]
      }
    }
 }
})()

cookie & session &localStorage 分別是什么团南？

1. cookie

• Cookie 是瀏覽器訪問服務(wù)器后噪沙，服務(wù)器傳給瀏覽器的一段數(shù)據(jù)。
• 瀏覽器需要保存這段數(shù)據(jù)吐根，不得輕易刪除正歼。
• 此后每次瀏覽器訪問該服務(wù)器，都必須帶上這段數(shù)據(jù)拷橘。
  如何使用 Cookie
• 第一個作用是識別用戶身份局义。
  比如用戶 A 用瀏覽器訪問了 http://a.com，那么 http://a.com 的服務(wù)器就會立刻給 A 返回一段數(shù)據(jù)「uid=1」（這就是 Cookie）冗疮。當(dāng) A 再次訪問 http://a.com 的其他頁面時萄唇，就會附帶上「uid=1」這段數(shù)據(jù)。
  同理术幔，用戶 B 用瀏覽器訪問 http://a.com 時另萤，http://a.com 發(fā)現(xiàn) B 沒有附帶 uid 數(shù)據(jù)，就給 B 分配了一個新的 uid特愿，為2仲墨，然后返回給 B 一段數(shù)據(jù)「uid=2」。B 之后訪問 http://a.com 的時候揍障，就會一直帶上「uid=2」這段數(shù)據(jù)目养。
  借此，http://a.com 的服務(wù)器就能區(qū)分 A 和 B 兩個用戶了毒嫡。
• 第二個作用是記錄歷史癌蚁。
  假設(shè) http://a.com 是一個購物網(wǎng)站，當(dāng) A 在上面將商品 A1 兜畸、A2 加入購物車時努释，JS 可以改寫 Cookie，改為「uid=1; cart=A1,A2」咬摇，表示購物車?yán)镉?A1 和 A2 兩樣商品了伐蒂。
  這樣一來，當(dāng)用戶關(guān)閉網(wǎng)頁肛鹏，過三天再打開網(wǎng)頁的時候逸邦，依然可以看到 A1恩沛、A2 躺在購物車?yán)铮驗(yàn)闉g覽器并不會無緣無故地刪除這個 Cookie缕减。
  借此雷客，就達(dá)到里記錄用戶操作歷史的目的了。

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

• 創(chuàng)建session后，會把關(guān)聯(lián)的session_id 通過setCookie 添加到http響應(yīng)頭部中炬搭。
• 瀏覽器在加載頁面時發(fā)現(xiàn)響應(yīng)頭部有 set-cookie字段蜈漓，就把這個cookie 種到瀏覽器指定域名下。
• 當(dāng)下次刷新頁面時宫盔，發(fā)送的請求會帶上這條cookie融虽， 服務(wù)端在接收到后根據(jù)這個session_id來識別用戶。
• cookie 是存儲在瀏覽器里的一小段「數(shù)據(jù)」灼芭，而session是一種讓服務(wù)器能識別某個用戶的「機(jī)制」有额，session 在實(shí)現(xiàn)的過程中需要使用cookie。 二者不是同一維度的東西彼绷。

3. localStorage

• localStorage HTML5本地存儲web storage特性的API之一巍佑，用于將大量數(shù)據(jù)（最大5M）保存在瀏覽器中，保存后數(shù)據(jù)永遠(yuǎn)存在不會失效過期寄悯，除非用 js手動清除萤衰。
• 不參與網(wǎng)絡(luò)傳輸。
• 一般用于性能優(yōu)化猜旬，可以保存圖片脆栋、js、css洒擦、html 模板椿争、大量數(shù)據(jù)。