html5 说明
# 客戶端儲存歷程 遠古時期 cookies的用法和缺陷 userdata HTML5時代 localstorage application cache 離線緩存 indexedeDB 客戶端數據庫 # HTML5儲存具體介紹 使用規范 每種儲存的特點以及解決的問題 在大型站點中的使用 具體業務適用的場景 # HTML5儲存(大量案例) 如何實現把圖片存在客戶端? 如何實現跨域共享客戶端緩存? 如何做到真正的離線訪問web應用? 如何實現一個客戶端的數據庫? 待續 # 目錄 H5之前如何實現儲存 H5的幾種常見的存儲方式 localstorage && sessionstorage application cache的介紹和使用 indexDB的介紹和使用 總結 # 關于儲存 儲存 cache 磁盤文件 數據庫 內存 # H5之前 cookies誕生。。。 http請求頭上會帶著 大小4k 主Domain污染 cookies在瀏覽器儲存形態 UserDate 1.只有IE支持(不符合w3c) 2.XML文件 # H5的儲存 目標 解決4k的大小問題 解決請求頭常帶儲存信息的問題 解決關系型儲存的問題 跨瀏覽器 # H5的幾種儲存 幾種儲存形式 本地存儲 ( localstorage && sessionstorage ) 離線緩存 ( application cache ) IndexedDB 和 Web SQL # H5本地儲存 API localstorage && sessionstorage 存儲形式: key --> value 過期 localstorage永久存儲,永不失效,除非手動刪除 sessionstorage如果:重新打開頁面 或 關閉瀏覽器,就消失了 大小 官方給出的文檔是,每個域名5M 使用方法 localstorage API介紹 getItem 取 setItem 設置 removeItem 移除 key 拿某一個索引 clear 全部刪掉 都可以存什么東東 數組 json數據 圖片 腳本 樣式文件 使用注意事項: 1.使用前要判斷瀏覽器是否支持 2.寫數據時候,需要異常處理,避免超出容量拋錯 3.避免把敏感的信息存入localstorage 4.key的唯一性 使用限制: 1.存儲更新策略,過期控制 2.子域名之間不能共享儲存數據 3.超出存儲大小之后如何存儲 ( LRU , FIFO 算法淘汰舊的數據) 4.server端如何取到 使用場景: 1.利用本地數據,減少網絡傳輸 2.弱網絡環境下,高延遲,低寬帶,盡量把數據本地化 # Web SQL 和 IndexedDB indexedDB database 一種能在瀏覽器中持久地存儲結構化數據的 數據庫, 并且為web應用提供了豐富的 查詢 能力 瀏覽器 chrome 11+ opera 不支持 firefox 4+ IE 10+ eg:移動端支持的是web sql .不過w3c不再維護web sql 存儲結構 IndexedDB是按域名分配獨立空間,一個獨立域名下可以創建多個數據庫,每個數據庫可以創建多個對象存儲空間(表),一個對象存儲空間可以存儲多個對象數據 IndexedDB? a.qq.com ->DB_A ->table_A1 ->object_record ->table_A2 ->object_record b.qq.com ->DB_B? # WebSql 和 IndexedDB 1.增,刪,改 2.事務 3.游標 4.索引 # H5離線緩存 什么離線緩存(offline application) 它可以讓Web應用在離線的情況下繼續使用,通過manifest文件指明需要緩存的資源 檢測是否在線 navigator.onLine 原理
?
?
使用 創建manifest文件 CACHE MANIFEST #version n.n CACHE: #需要緩存的文件 /css/sample.css /images/image.jpg NETWORK: #每次重新拉取的文件 * (代表除了cache外從server拉取的文件) FALLBACK: # 離線狀況下代替文件 / offline.html 在HTML頁面中引用manifest文件 <html manifest="sample.appcache"> 在服務器添加mime-type text/cache-manifest 如何更新 如果有修改資源文件,必須通過修改manifest文件來刷新被緩存的文件列表 優勢 1.完全離線 2.資源被緩存,加載更快 3.降低server負載 使用缺陷 1.含有manifest屬性的當前請求頁無論如何都會被緩存 2.更新需要簡歷在manifest文件的更新,文件更新后是需要頁面再次刷新的(需要2次刷新才能獲取新資源) 3.更新是全局性的,無法單獨更新某個文件(無法單點更新) 4.對于鏈接的參數變化是敏感的,任何一個參數的修改都會被(master)重新緩存(重復緩存含參頁面)index.html和index.htm?renew=1 會被認為是不同文件,分別緩存 試用場景 1.單地址的頁面 2.對實時性要求不高的業務 3.離線webapp # 還有哪些客戶端存儲 uerDate? 64k 只支持IE(5.0---9.0) google Gears 64SQLite chrome 12.0后放棄支持 用戶授權 ##### 總結 ##### H5存儲優勢 存儲空間大 接口豐富 數據相對安全 (把數據存在客戶端,沒把數據跟URL帶上) 關系型 (indexDB) 省流量 H5存儲劣勢 瀏覽器兼容 同源 (子域名不能共享) 腳本控制 更新策略?
轉載于:https://www.cnblogs.com/yhdsir/p/4652962.html
總結
- 上一篇: 怎样注册滴滴快车司机?如何注册加入滴滴快
- 下一篇: vboxmanage查询正在运行的vbo