HTML5存儲

 

介紹

    存儲方式：

        cookies缺點

            http請求頭會帶着

            4K大小

            主域名污染

        H5存儲

            存儲方式

                localStorage && sessionStorage

                application cache

                indexDB

            目標

                解決4K大小問題

                解決請求頭帶存儲信息問題

                解決關係型存儲

                跨瀏覽器

    存儲環境：

        硬件

            磁盤，內存

        軟件

            cache，數據庫，磁盤文件

    H5存儲優劣：

        優點

            大    存儲空間大

            快    離線緩存→省流量

            強    接口豐富，關係型數據庫

        劣勢

            腳本控制    只能經過post/get方式

            更新策略    須要業務專門處理

本地存儲

    通用：

        存儲形式    

            key -> value

        過時

            localStorage    永久，除非手動刪除

            sessionStorage    關閉瀏覽器消失，或重打開

        大小

            每域名5M

    使用：

        API

            設置    setItem

            獲取    getItem，key

            刪除    removeItem，clear

        問題

            過時控制    業務代碼解決

            子域名共享數據    使用postMessage

            超出存儲大小    使用算法優化（LRU、FIFO）

            server端如何取到    使用post或get參數

        使用場景

            減小網絡傳輸

            弱網絡更明顯

    注意事項：

        檢查瀏覽器是否支持

        利用異常處理，避免超容量報錯

        key的惟一性

web數據庫

    Web SQL：

        W3C再也不維護

    IndexDB：

        是什麼

            瀏覽器持久存儲數據

            結構化數據

            提供豐富的查詢能力

        瀏覽器支持

               IE10+

            firefox

            chrome

        存儲結構

            域名→庫→表→記錄

        使用參考

        

離線緩存

    是什麼：

        使web應用在離線下使用

        經過manifest指明緩存資源

        使用場景

            單地址頁面

            離線webapp

            實時性要求不高的業務

    使用：

        原理

            瀏覽器→訪問App cache→返回cache資源

            App cache→檢查manifest→有更新→從新拉取服務端文件→更新緩存

            App cache→檢查manifest→無更新→結束

        三方配合

            manifest文件

                頭聲明    CACHE MANIFEST

                版本號    version n.n

                設置緩存文件    CACHE

                不緩存文件    NETWORK

            html    

1	< html  manifest = "sample.appcache" >

            服務器    

1	mime-type text/cache-manifest

        更新和停用

            停用    修改manifest文件名

            更新    修改manifest 文件

    優劣：

        優點

            徹底離線

            加載更快，下降服務端負載

        劣勢

    ​    ​    ​2次刷新生效    ​經過js reroad解決

    ​    ​    ​更新是全局性的，沒法單獨更新某文件

    ​    ​    ​連接參數變化敏感