23. 離線應用與用戶端存儲
離線應用要與傳統用戶端應用同場競技
- 首先，要能确定裝置能否上網，以便下一步執行正确的操作
- 然後，應用還必須能通路一定的資源（圖像、JavaScript、CSS等）
- 最後，要有本地存儲空間，無論是否上網都不妨礙讀寫
23.1 離線檢測
- 屬性
-
navigator.onLine
-
- 事件
-
online
-
offline
-
23.2 應用緩存 application cache
application cache
- 描述檔案
manifest file
CACHE MANIFEST
#Comment
file.js
file.css
- 引用
<html manifest="/offline.manifest">
-
applicationCache
-
status
- 事件
checking
error
noupdate
downloading
progress
updateready
cached
-
23.3 資料存儲
某個特定使用者的資訊應該存儲在該使用者的機器上。（登入資訊、偏好設定）
- Cookie 在用戶端存儲會話資訊
伺服器響應頭：
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value
浏覽器為每個請求添加Cookie HTTP頭将資訊發送回伺服器：
GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value
- cookie 限制
- cookie在性質上是綁定在特定的域名下的。
- 當設定一個cookie後，再給建立他的域名發送請求時，都會包含這個cookie。
- 這個限制確定了存儲在cookie的資訊隻能讓準許的接受者通路。
- 删除政策
LRU
- cookie 構成
- 名稱
Name
- 值
Value
- 域
Domain
- 路徑
Path
- 失效時間
Expires / Max-Age
- 安全标志
Secure
- 名稱
域、路徑、失效時間、secure标志都是伺服器傳遞給浏覽器的訓示，以指定如何發送cookie。這些參數并不會作為發送到伺服器的資訊的一部分，隻有名值對兒才會被發送。
Response Headers:
Request Headers:
- JavaScript中使用Cookie
document.cookie; // 讀
document.cookie = "name=value"; // 寫
document.cookie = encodeURIComponent("name") + "="
+ encodeURIComponent("value") + "; domain=www.github.com; path=/";
- 子Cookie
subcookie
- 為了繞開浏覽器對cookie數的限制，
name=name1=value1&name2=value2
- 為了繞開浏覽器對cookie數的限制，
- cookie性能
- 所有的cookie都會由浏覽器作為請求頭發送，是以cookie中存儲大量資訊會影響到特定域的請求性能。
當資料需要被嚴格控制在用戶端上時，無需持續地将資料發回伺服器。WebStorage的兩個目标：
- 提供一種cookie之外的存儲會話資料的途徑
- 提供一種存儲大量可以跨會話存在的資料機制
- WebStorage
- 通用方法和屬性
-
clear()
-
getItem(name)
-
key(index)
-
setItem(name, value)
-
removeItem(name)
-
length
-
-
sessionStorage
- IE的事務形式方法，begin，commit
- globalStorage 已廢棄
-
localStorage
- 持久儲存用戶端資料
- 資料保留到通過JavaScript清除或者使用者自己清除浏覽器緩存
-
storage
-
indexedDB
-
event.target.result
-
setVersion()
-
onerror/onsuccess
-
transaction()
- 遊标查詢
openCursor()
- 鍵範圍
key range
- 索引
createIndex()
-
- 通用方法和屬性
- 限制
- 同源（協定，域名，端口） -> 不能跨域共享