Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

13. 瀏覽器儲存方案

125 views

Published on

認識Cookie
使用Web Storage
操作Indexed Database

Published in: Technology
  • Be the first to comment

  • Be the first to like this

13. 瀏覽器儲存方案

  1. 1. 13. 瀏覽器儲存方案 • 學習目標 – 認識Cookie – 使用Web Storage – 操作Indexed Database 2
  2. 2. Cookie • 為了在無狀態協定上支援狀態管理 • 現在最新的規範為RFC 6265 • Cookie可儲存的資訊量非常有限 3
  3. 3. Cookie安全 • Domain屬性可用來指定,Cookie可以送往哪 些網域 – 在沒有指定的情況下,預設為來源網域,而且不包 含子網域 – 如果設定了Domain屬性,就會包含設定網域之子 網域 • Path屬性用來指定Cookie可以送往網域下哪 些目錄(包含子目錄),在沒有設置的情況下, 預設是來源目錄 • 相同Domain與Path的資料會存為一個檔案 4
  4. 4. • RFC 6265規範伺服端設置Cookie時,可以 附加HttpOnly屬性,令Cookie僅可用於 HTTP傳輸,不能被JavaScript讀取。 • RFC 6265也規範了伺服端設置Cookie時, 可以附加Secure屬性,要求客戶端只能在 安全連線(例如HTTPS加密)發送Cookie 5
  5. 5. document.cookie • 客戶端要設置Cookie與Set-Cookie標頭 無關 • 只要對document.cookie設定'k1=v1' 形式的字串,就會直接在瀏覽器儲存 Cookie 6
  6. 6. 7
  7. 7. 8
  8. 8. • 若要透過document.cookie設置Cookie 屬性,格式與Set-Cookie時的要求相同 • 每設定一次就會產生一個Cookie • 對document.cookie取值,並非取得最 後設定的Cookie,而是個 'k1=v1;k2=v2'格式的字串 9
  9. 9. 10
  10. 10. 11
  11. 11. 12
  12. 12. 13
  13. 13. 14
  14. 14. Web Storage • 可以透過sessionStorage或 localStorage在客戶端儲存資訊 • Web Storage與HTTP沒有關係 • 對於不用在請求中發送給伺服端的狀態, 可以使用Web Storage儲存 15
  15. 15. • 主要規範了Storage、sessionStorage、 localStorage介面,以及storage事件 • Storage介面定義了key()、getItem()、 setItem()、removeItem()、clear() 方法,以及length特性 16
  16. 16. • localStorage為同源的頁面提供一個 Storage實例 • 儲存的資料可以長期保存,關閉瀏覽器後 資料不會消失 • 不提供過期時間的機制,不需要的資料必 須自行刪除 17
  17. 17. • sessionStorage與HTTP會話的狀態管理 沒有關係,而是指每個頂層瀏覽環境各自 的狀態 • 每個頂層頁面各擁有一個Storage實例 • 如果使用多個分頁請求同一來源的資源, 每個分頁各自會擁有一個Storage實例 • 分頁間不能共用資料,在分頁關閉後,資 料就會消失 18
  18. 18. 19
  19. 19. 20
  20. 20. 21
  21. 21. storage事件 • 若有Storage實例因為執行了setItem()、 removeItem()與clear()方法,導致 Storage實例儲存的內容「不同」,「其 他共享Storage實例的文件」,window實 例就會觸發storage事件 • 沒有改變內容,只是又設定相同值,並不 會觸發事件 • 當前文件,不會觸發storage事件 22
  22. 22. 23
  23. 23. 24
  24. 24. 25
  25. 25. 26
  26. 26. Indexed Database • W3C在2015年1月發佈 • 對象並非關聯式資料庫,也沒有SQL語句的 支援,而像是NoSQL資料庫 • 2018年1月更進一步發佈了Indexed Database API 2.0 27
  27. 27. • 並非關聯式資料庫 • 相關API是基於非同步 • 可儲存的資料類型不限於字串,也可儲存 ArrayBuffer等二進位資料實例 • 基於同源策略,只能存取相同來源的資料 庫 28
  28. 28. • open()方法傳回IDBOpenDBRequest實 例,代表對資料庫的開啟請求 • 開啟成功會觸發success事件,發生錯誤 會觸發error事件 • result可取得IDBDatabase實例 29
  29. 29. 30
  30. 30. • 如果儲存的資料是物件,可以為物件的特 性名稱建立索引(Index),之後可以根據 索引來查找資料 31
  31. 31. • 若要存取資料庫,都必須在交易 (Transaction)中進行 • 開啟交易是透過IDBDatabase實例的 transaction()方法 32
  32. 32. 33
  33. 33. 34
  34. 34. 35
  35. 35. 36
  36. 36. 37
  37. 37. 封裝資料庫操作 38
  38. 38. 39
  39. 39. 40
  40. 40. 41
  41. 41. 42
  42. 42. 43
  43. 43. 44

×