認識Cookie 使用Web Storage 操作Indexed Database

2. 13. 瀏覽器儲存方案
• 學習目標
– 認識Cookie
– 使用Web Storage
– 操作Indexed Database
2

3. Cookie
• 為了在無狀態協定上支援狀態管理
• 現在最新的規範為RFC 6265
• Cookie可儲存的資訊量非常有限
3

4. Cookie安全
• Domain屬性可用來指定，Cookie可以送往哪
些網域
– 在沒有指定的情況下，預設為來源網域，而且不包
含子網域
– 如果設定了Domain屬性，就會包含設定網域之子
網域
• Path屬性用來指定Cookie可以送往網域下哪
些目錄（包含子目錄），在沒有設置的情況下，
預設是來源目錄
• 相同Domain與Path的資料會存為一個檔案
4

5. • RFC 6265規範伺服端設置Cookie時，可以
附加HttpOnly屬性，令Cookie僅可用於
HTTP傳輸，不能被JavaScript讀取。
• RFC 6265也規範了伺服端設置Cookie時，
可以附加Secure屬性，要求客戶端只能在
安全連線（例如HTTPS加密）發送Cookie
5

6. document.cookie
• 客戶端要設置Cookie與Set-Cookie標頭
無關
• 只要對document.cookie設定'k1=v1'
形式的字串，就會直接在瀏覽器儲存
Cookie
6

7. 7

8. 8

9. • 若要透過document.cookie設置Cookie
屬性，格式與Set-Cookie時的要求相同
• 每設定一次就會產生一個Cookie
• 對document.cookie取值，並非取得最
後設定的Cookie，而是個
'k1=v1;k2=v2'格式的字串
9

10. 10

11. 11

12. 12

13. 13

14. 14

15. Web Storage
• 可以透過sessionStorage或
localStorage在客戶端儲存資訊
• Web Storage與HTTP沒有關係
• 對於不用在請求中發送給伺服端的狀態，
可以使用Web Storage儲存
15

16. • 主要規範了Storage、sessionStorage、
localStorage介面，以及storage事件
• Storage介面定義了key()、getItem()、
setItem()、removeItem()、clear()
方法，以及length特性
16

17. • localStorage為同源的頁面提供一個
Storage實例
• 儲存的資料可以長期保存，關閉瀏覽器後
資料不會消失
• 不提供過期時間的機制，不需要的資料必
須自行刪除
17

18. • sessionStorage與HTTP會話的狀態管理
沒有關係，而是指每個頂層瀏覽環境各自
的狀態
• 每個頂層頁面各擁有一個Storage實例
• 如果使用多個分頁請求同一來源的資源，
每個分頁各自會擁有一個Storage實例
• 分頁間不能共用資料，在分頁關閉後，資
料就會消失
18

19. 19

20. 20

21. 21

22. storage事件
• 若有Storage實例因為執行了setItem()、
removeItem()與clear()方法，導致
Storage實例儲存的內容「不同」，「其
他共享Storage實例的文件」，window實
例就會觸發storage事件
• 沒有改變內容，只是又設定相同值，並不
會觸發事件
• 當前文件，不會觸發storage事件
22

23. 23

24. 24

25. 25

26. 26

27. Indexed Database
• W3C在2015年1月發佈
• 對象並非關聯式資料庫，也沒有SQL語句的
支援，而像是NoSQL資料庫
• 2018年1月更進一步發佈了Indexed
Database API 2.0
27

28. • 並非關聯式資料庫
• 相關API是基於非同步
• 可儲存的資料類型不限於字串，也可儲存
ArrayBuffer等二進位資料實例
• 基於同源策略，只能存取相同來源的資料
庫
28

29. • open()方法傳回IDBOpenDBRequest實
例，代表對資料庫的開啟請求
• 開啟成功會觸發success事件，發生錯誤
會觸發error事件
• result可取得IDBDatabase實例
29

30. 30

31. • 如果儲存的資料是物件，可以為物件的特
性名稱建立索引（Index），之後可以根據
索引來查找資料
31

32. • 若要存取資料庫，都必須在交易
（Transaction）中進行
• 開啟交易是透過IDBDatabase實例的
transaction()方法
32

33. 33

34. 34

35. 35

36. 36

37. 37

38. 封裝資料庫操作
38

39. 39

40. 40

41. 41

42. 42

43. 43

44. 44