站長資訊網
        最全最豐富的資訊網站

        html5幾種在客戶端存儲數據的實例詳解


        1.Application Cache

        HTML5引入應用緩存,意味著web應用可以進行緩存,即使在沒有網絡的情況下也能使用。

        application cache有三個特點

        • 離線瀏覽

        • 已緩存的資源加載速度更快

        • 減少服務器負載,瀏覽器將只從服務器下載更新過或更改過的資源

        使用方法就是在 html標簽中添加一個manifest屬性

        每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性,則頁面不會被緩存(除非在 manifest 文件中直接指定了該頁面)。

        manifest 文件的建議的文件擴展名是:".appcache"。

        <!DOCTYPE HTML>  <html manifest="demo.appcache">  <body>     The content of the document......  </body>  </html>

        manifest 文件是簡單的文本文件,它告知瀏覽器被緩存的內容(以及不緩存的內容)。

        manifest 文件可分為三個部分:

        • CACHE MANIFEST – 在此標題下列出的文件將在首次下載后進行緩存

        • NETWORK – 在此標題下列出的文件需要與服務器的連接,且不會被緩存

        • FALLBACK – 在此標題下列出的文件規定當頁面無法訪問時的回退頁面(比如 404 頁面)

        一個完整的manifest文件

        CACHE MANIFEST    # 2012-02-21 v1.0.0  /theme.css  /logo.gif  /main.js  NETWORK:  login.asp  FALLBACK:  /html5/ /404.html

        2.localStorage & sessionStorage

        HTML5 提供了兩種在客戶端存儲數據的新方法:

        • localStorage – 沒有時間限制的數據存儲

        • sessionStorage – 針對一個 session 的數據存儲

        之前,這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲,因為它們由每個對服務器的請求來傳遞,這使得 cookie 速度很慢而且效率也不高。

        localStorage和sessionStorage都具有相同的操作方法,例如setItem()、getItem()和removeItem()等
        localStorage和sessionStorage的方法:

        setItem存儲value
        用途:將value存儲到key字段
        用法:.setItem( key, value)
        代碼示例:

        sessionStorage.setItem("key", "value");  localStorage.setItem("site", "js8.in");

        getItem獲取value
        用途:獲取指定key本地存儲的值
        用法:.getItem(key)
        代碼示例:

        var value = sessionStorage.getItem("key");   var site = localStorage.getItem("site");

        removeItem刪除key
        用途:刪除指定key本地存儲的值
        用法:.removeItem(key)
        代碼示例:

        sessionStorage.removeItem("key");   localStorage.removeItem("site");

        clear清除所有的key/value
        用途:清除所有的key/value
        用法:.clear()

        sessionStorage不是一種持久化存儲,瀏覽器關閉之后會隨之清除。而localStorage用于持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。

        3.indexDB

        indexDB是一種輕量級NOSQL數據庫。相比web sql(sqlite)更加高效,包括索引、事務處理和健壯的查詢功能。

        它的特點包括:

        • 一個網站可能有一個或多個 IndexedDB 數據庫,每個數據庫必須具有惟一的名稱。

        • 一個數據庫可包含一個或多個對象存儲。一個對象存儲(由一個名稱惟一標識)是一個記錄集合。每個記錄有一個鍵 和一個值。該值是一個對象,可擁有一個或多個屬性。鍵可能基于某個鍵生成器,從一個鍵路徑衍生出來,或者是顯式設置。一個鍵生成器自動生成惟一的連續正整數。鍵路徑定義了鍵值的路徑。它可以是單個 JavaScript 標識符或多個由句點分隔的標識符。(有點像列數據庫的特點)

        • IndexedDB中,幾乎所有的操作都是采用了command->request->result的方式。比如查詢一條記錄,返回一個request,在request的result中得到查詢結果。又比如打開數據庫,返回一個request,在request的result中得到返回的數據庫引用。

        • indexedDB需要放到web服務器上才可以運行。

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 日韩精品无码专区免费播放| 精品久久久久久亚洲精品| 色婷婷久久久SWAG精品| 2021最新国产精品网站| 亚洲精品乱码久久久久久按摩 | 国产国拍亚洲精品mv在线观看| 免费精品精品国产欧美在线欧美高清免费一级在线 | 国产精品部在线观看| 岛国精品一区免费视频在线观看| 亚洲欧美国产精品专区久久| 精品露脸国产偷人在视频| 国产精品福利网站导航| 久久亚洲美女精品国产精品| 日本国产精品久久| 黑巨人与欧美精品一区| 一级香蕉精品视频在线播放| 大桥未久在线精品视频在线| 人妻AV一区二区三区精品| 一区二区日韩国产精品| 亚洲婷婷国产精品电影人久久| 久久精品国产欧美日韩| 国产精品哟女在线观看| 99久久伊人精品综合观看| 久久福利青草精品资源站| 动漫精品专区一区二区三区不卡| 精品人妻系列无码天堂| 久久精品亚洲精品国产色婷| 无码精品国产一区二区三区免费| 亚洲精品无码专区2| 亚洲精品午夜无码电影网| 一本久久a久久精品vr综合| 最新精品露脸国产在线| 久久久91人妻无码精品蜜桃HD| 久久精品一区二区影院 | 国产精品va无码一区二区| 国产亚洲精品精华液| 国产成人亚洲精品青草天美| 99re这里只有精品热久久| 久久久久四虎国产精品| 97久视频精品视频在线老司机| 国产精品1024视频|