BOM_資料儲存Cookie& localStorage

window.onload 和 document.onDOMContentLoaded 有什麼區別？

//頁面所有資源載入完成
window.onload = function(){
  console.log('window loaded')
}
//DOM結構解析完成
document.addEventListenner("DOMContentLoaded",function(){
  console.log("DOMContentLoaded")
})

如何獲取圖片真實的寬高

 document.addEventListener('DOMContentLoaded', function(){
    console.log('DOMContentLoaded ')
  })

    console.log($('img').width) //0
    $('img').onload = function(){  //圖片請求到了,觸發事件
        console.log(this.width)   //此時才能得到圖片的真實大小
  }

如何獲取元素的真實寬高

window.getComputedStyle(node).height/width返回的是相應的寬高，單位為畫素.

URL 如何編碼解碼？為什麼要編碼？

• JavaScript提供四個URL的編碼/解碼方法。
  • decodeURI()
  • decodeURIComponent()
  • encodeURI()
  • encodeURIComponent()

encodeURI方法不會對下列字元編碼

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

encodeURIComponent方法不會對下列字元編碼
1. ASCII字母
2. 數字
3. ~!*()'

為什麼編碼?

• 為什麼需要Url編碼，通常如果一樣東西需要編碼，說明這樣東西並不適合傳輸。原因多種多樣，如Size過大，包含隱私資料，對於Url來說，之所 以要進行編碼，是因為Url中有些字元會引起歧義
• Url引數字串中使用key=value鍵值對這樣的形式來傳參，鍵值對之間以&符號分隔，如/s?q=abc&ie=utf- 8。如果你的value字串中包含了=或者&，那麼勢必會造成接收Url的伺服器解析錯誤，因此必須將引起歧義的&和=符號進行轉義， 也就是對其進行編碼
• Url的編碼格式採用的是ASCII碼，而不是Unicode，這也就是說你不能在Url中包含任何非ASCII字元，例如中文。否則如果客戶端瀏 覽器和服務端瀏覽器支援的字符集不同的情況下，中文可能會造成問題。

補全如下函式，判斷使用者的瀏覽器型別

function isAndroid(){
}
funcnction isIphone(){
}
function isIpad(){
}
function isIOS(){
}

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

cookie & session &localStorage 分別是什麼

看到cookie,是不是想到了餅乾,哈哈,今天我們要說的可不是餅乾,今天我們要說的是瀏覽器的cookie

什麼是cookie呢?

• cookie是儲存在瀏覽器上的一小段資料，用來記錄某些當頁面關閉或者重新整理後仍然需要記錄的資訊。在控制檯用 「document.cookie」檢視你當前正在瀏覽的網站的cookie。

如何設定?

• 伺服器端
  • 可以通過在http返回裡面設定Set-cookie值告訴瀏覽器
• 瀏覽器端
  • 開啟瀏覽器偵錯程式,選到Application,找到cookie選項

cookie屬性

屬性名	預設值	作用
Name(必填)		名
Value(必填)		值
Domain	當前文件域	作用域
Path	當前文件路徑	作用路徑
Expires/Max-age	瀏覽器會話時間	失效時間
secure	false	htttps協議時生效

作用域

作用路徑

Cookie -> javascript物件

//轉化為js物件
function getcookie () {
    var cookie = {};
    var all = document.cookie;
    if (all === '')
        return cookie;
    var list = all.split('; ');
    for (var i = 0; i < list.length; i++) {
        var item = list[i];
        var p = item.indexOf('=');
        var name = item.substring(0, p);
        name = decodeURIComponent(name);
        var value = item.substring(p + 1);
        value = decodeURIComponent(value);
        cookie[name] = value;
    }
    return cookie;
}

cookie的設定/修改

//設定
document.cookie = "name = value"
//修改
function setCookie (name, value, expires, path, domain, secure) {
    var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires)
        cookie += '; expires=' + expires.toGMTString();
    if (path)
        cookie += '; path=' + path;
    if (domain)
        cookie += '; domain=' + domain;
    if (secure)
        cookie += '; secure=' + secure;
    document.cookie = cookie;
}

刪除cookie

function removeCookie (name, path, domain) {
    document.cookie = name + '='
    + '; path=' + path
    + '; domain=' + domain
    + '; max-age=0';
}

缺陷

• 流量代價
• 安全性問題
• 大小限制

---

Storage

• local Storage
• session Storage

因為cookie有這麼一些缺陷,所以HTML5提供了storage儲存替代方案

localStorage

• 用於將大量資料（最大5M）儲存在瀏覽器中，儲存後資料永遠存在不會失效過期，除非用 js手動清除。
• 不參與網路傳輸。
• 一般用於效能優化，可以儲存圖片、js、css、html 模板、大量資料。

可以理解js物件

• 讀取
  • localStorage.name
• 新增/修改
  • localStorage.name = 'value'(string)
• 刪除
  • delete localStorage.name

API

• 獲取鍵值對數量
  • localStorage.length
• 讀取
  • localStorage.getItem("name"),localStorage.key(i)
• 新增/修改
  • localStorage.setItem("name","value")
• 刪除對應鍵值
  • localStorage.removeItem("name")
• 刪除所有資料
  • localStorage.clear()

session

當一個使用者開啟淘寶登入後，重新整理瀏覽器仍然展示登入狀態。伺服器如何分辨這次發起請求的使用者是剛才登入過的使用者呢？這裡就使用了session儲存狀態。使用者在輸入使用者名稱密碼提交給服務端，服務端驗證通過後會建立一個session用於記錄使用者的相關資訊，這個 session 可儲存在伺服器記憶體中，也可儲存在資料庫中。

• 建立session後，會把關聯的session_id 通過setCookie 新增到http響應頭部中。
• 瀏覽器在載入頁面時發現響應頭部有 set-cookie欄位，就把這個cookie 種到瀏覽器指定域名下。
• 當下次重新整理頁面時，傳送的請求會帶上這條cookie， 服務端在接收到後根據這個session_id來識別使用者。

cookie 是儲存在瀏覽器裡的一小段「資料」，而session是一種讓伺服器能識別某個使用者的「機制」，session 在實現的過程中需要使用cookie。 二者不是同一維度的東西。

使用 localStorage封裝一個 Storage 物件，達到如下效果

Storage.set('name', '飢人谷') 
Storage.set('age', 2, 30) ;  //設定 name 欄位儲存的值為'飢人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'],  60)

Storage.get('name')   // ‘飢人谷’
Storage.get('age')     //  如果不超過30秒，返回數字型別的2；如果超過30秒，返回 undefined，並且 localStorage 裡清除 age 欄位
Storage.get('teachers')  //如果不超過60秒，返回陣列； 如果超過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]
      }
    }
 }
})()