本地存儲與離線

1、本地與離線課程介紹- Web Storage1. 本地2. 本地- IndexedDB3. 本地的擴展介紹課程介紹 app cache4. 離線5. 總結分析1. 移動端網(wǎng)絡環(huán)境因素- 數(shù)據(jù)響應慢，體驗下降需求網(wǎng)速對比分析需求2. 流量因素- 客戶端= 節(jié)省流量 = 節(jié)省金錢文件大小 10KB 8100元日均PV 7,500,00010KB 年花費75GB * 365 27TB/年1KB 年花費 810元某CDN5TB/1500元分析需求3. 追求原生體驗- 離線使用應用應用相關、數(shù)據(jù)-Cookie 可行否？Cookie 的局限性大小限制，僅 4kb 左右-單個下的數(shù)量限制，50個左右-污染請

2、求頭，浪費流量認識 localStorage 和 sessionStoragelocalStorage 和 sessionStorage1. 相同的使用方法2. 不同的時效3. 不同的容量相同的使用方法1. 使用 setItem 方法設置內容2. 使用 getItem 方法獲取內容3. 使用 removeItem 方法刪除內容相同的使用方法4. 使用 clear 方法清除所有內容5. 使用 length 屬性獲取內容個數(shù)6. 使用 key 方法獲取字段不同的會持久化時效localStoragesessionStorage會在網(wǎng)頁會話結束后失效不同的容量localStorage 容量一般在 2

3、5Mb 左右sessionStorage容量不一，部分瀏覽器不設限/web-storage/support-test/使用 Storage 時的使用 Storage 時的容量超出限制1.- 拋出 QuotaExceededError 異常值時應使用 try catch 捕獲異常使用 Storage 時的類型的限制2.- 僅能字符串- 注意類型轉換使用 Storage 時的3. sessionStorage 失效機制- 刷新頁面并失效- 相同 URL 不同頁不能共享 sessionStorageWeb Storage 的優(yōu)化性能與容量大小無關，與次數(shù)有關- 減少item 次數(shù)- 單個 item

4、中盡可能多的數(shù)據(jù)實現(xiàn)一個帶有過期機制的 localStorage帶有過期機制的 localStorage 的功能需求1. 可以設置數(shù)據(jù)的時間2. 過期數(shù)據(jù)3. 自行維護空間如何創(chuàng)建數(shù)據(jù)庫和“表”如何創(chuàng)建數(shù)據(jù)庫和“表”1. indexedDB.open 創(chuàng)建數(shù)據(jù)庫2. indexedDB.createObjectStore 創(chuàng)建“表”設置主鍵的兩種方法1. 設置自增主鍵 - autoIncrement: true2. 取數(shù)據(jù)中字段作為主鍵 - keyPath: 字段名關于“表”的增刪查改如何使用事務獲取表調用 IDBDatabase.transaction 方返回一個IDBTransaction

5、 對象，它含有一個 objectStore 方法可以讓用戶通過指定模式操作數(shù)據(jù)庫中的“表”indexedDB -> transaction -> objectStore事務的模式1. 讀寫模式 - readwrite2. 只讀模式（默認） - readonly3. 版本變更模式 - versionchange關于“表”的增刪查改的相關方法1. 增加數(shù)據(jù) IDBObjectStore.add2. 獲取數(shù)據(jù) IDBObjectStore.get3. 獲取所有數(shù)據(jù) IDBObjectStore.gl關于“表”的增刪查改的相關方法4. 修改數(shù)據(jù) IDBObjectStore.put5. 刪

6、除數(shù)據(jù) IDBObjectStore.delete6. 清除所有數(shù)據(jù) IDBObjectStore.clearIDBRequest 對象1. 使用 IDBRequest.onsuccess 執(zhí)行完成回調2. 使用 IDBRequest.result 獲取結果3. 使用 IDBRequest.onerror 執(zhí)行失敗回調關于索引的使用如何創(chuàng)建索引IDBObjectStore.createIndex- indexName: 索引名稱- keyPath: 索引字段，可以為空或者數(shù)組（type array）- optionParameters: 索引配置參數(shù)使用索引的好處中的值進行檢索1. 可以使用2

7、. 索引自動更新3. 索引數(shù)據(jù)自動排序關于游標的使用如何創(chuàng)建游標IDBObjectStore/IDBIndex.openCursor- 接收可選參數(shù) range 和 direction- 返回一個 IDBRequet 對象- 該 IDBRequet 對象的結果是一個 IDBCursor 對象IDBKeyRange 對象1. upperBound: 指定游標范圍的上限2. lowerBound: 指定游標范圍的下限IDBKeyRange 對象3. bound: 指定游標范圍的區(qū)間4. only: 指定游標的值IDBKeyRange 對象key range 取值表RangeCodeAll keys

8、 xupperBound(x)All keys < xupperBound(x, true)All keys ylowerBound(y)All keys > ylowerBound(y, true)The key = zonly(z)IDBKeyRange 對象key range 取值表RangeCodeAll keys x && ybound(x, y)All keys > x && < ybound(x, y, true, true)All keys > x && ybound(x, y, true, fals

9、e)All keys x && < ybound(x, y, false, true)Direction 參數(shù)direction 參數(shù)的值- next: 順序- nextunique: 順序唯一- prev: 逆序- prevunique: 逆序唯一索引和游標的結合使用索引和游標的優(yōu)勢索引：可以按值搜索游標：可以選擇遍歷順序及操作數(shù)據(jù)IndexedDB 的優(yōu)劣IndexedDB 與 Web Storage 比較indexedDB 的優(yōu)勢-類型更加豐富- 可實現(xiàn)高級- 可在 Web Workers 中使用-容量更大IndexedDB 與 Web Storage 比較Web

10、Storage 的優(yōu)勢- API 較少，更容易掌握- 兼容性更好IndexedDB 的兼容性問題1. IOS8 & 9 中 webview 不支持 indexedDB2. FF 單次Blob 數(shù)據(jù)超 50Mb 會拋出異常3. Safari 的 indexedDB 不能用于 web workers其他方式介紹WebSQLWebSQL 的 API 有哪些？- openDatabase: 打開數(shù)據(jù)庫- transaction: 獲取事務，進行數(shù)據(jù)庫操作- executeSql: 執(zhí)行 SQL 進行WebSQL 的現(xiàn)狀1. 兼容性問題嚴重WebSQL 的現(xiàn)狀2. W3C 已經(jīng)不再積極處理其相關

11、規(guī)范Filesystem & FileWriter API和 WebSQL 相似運- 嚴重的兼容性問題- 規(guī)范被廢棄UserDataIE 獨的方式- 只在 Windows 系統(tǒng)的 IE 中存在- 容量不大UserData 的容量Security ZoneDocumentLimit(KB)DomainLimit(KB)Local Machine1281024Intranet51210240Trusted Sites1281024Internet1281024Restricted64640跨域限制何謂同源1.相同2. 端口相同3. 協(xié)議相同本地受同源策略影響如何實現(xiàn)跨站點共享本地數(shù)據(jù)？po

12、stMessage離線Application cache課程介紹1. Application Cache 的功能2. manifest 文件配置3. 示例Application Cache 的功能1. 可2. 被可供離線使用3. 可通過配置文件修改策略manifest 文件配置1. 文件起始標記 CACHE MANIFEST2. 緩存標記 CACHE3. 網(wǎng)絡請求標記 NETWORKmanifest 文件配置失效回退標記 FALLBACK4.5. 使用 # 進行注釋app cache 示例1. 運行一個 web 服務2. manifest 文件的 MIME Type 為 text/cache-

13、manifestapplication cache 糟糕之處application cache 糟糕之處1. 文件總是來自緩存，即使環(huán)境2. 更新只在 manifest 文件自身更新之后3. 別忘記給所有緩存文件加上 HTTP 緩存application cache 糟糕之處4. 未被緩存的必須在 NETWORK 中指明5. 無法分辨響應式6. 無法重定向至其他未來的曙光 service workerservice worker 的諸多功能1. 離線緩存2. 消息推送3.消息傳遞service worker 的諸多功能4. 網(wǎng)絡，轉發(fā)請求，響應service worker 如何實現(xiàn)離線1. 安裝 service worker2.install，并文件3.fetch，返回被的文件service worker 如何實現(xiàn)離線service worker 離線1. 可以更細致的功能的優(yōu)勢2. 擁有強大的更新機制service worker 現(xiàn)狀1. 規(guī)范處于草案狀態(tài)2. 使用需要成本 HTTPS 協(xié)議3. 兼容性不佳service worker 示例知識點回顧知識點回顧1. localStorage 和 sessionStorage- 注