日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

WebApp本地存储 (离线缓存策略策略）

發布時間：2024/4/15 编程问答 31 豆豆
生活随笔 收集整理的這篇文章主要介紹了 WebApp本地存储 (离线缓存策略策略） 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

開發離線應用的緩存方法大概有4種（如下safari開發工具中的resources所示）


1.cookies（略）：傳統儲存策略。缺點很明顯：儲存的容量過小，而且很容易被各種軟件當垃圾清除，如360等。

2.Application Cache資源緩存：在html中指定一個manifest文件，給文件中羅列出需要緩存的資源文件列表。瀏覽器根據資源列表對資源文件緩存。

3.Dom Storage：這一種基于key/value的格式。

DOM Storage 分為兩類：sessionStorage 和 localStorage。除了以下區別外，這兩類存儲對象的功能是完全一致的。

  • sessionStorage 用于存儲與當前瀏覽器窗口關聯的數據。窗口關閉后，sessionStorage 中存儲的數據將無法使用。
  • localStorage 用于長期存儲數據。窗口關閉后，localStorage 中的數據仍然可以被訪問。所有瀏覽器窗口可以共享 localStorage 的數據.
    • 4.web sql Databases:除了 DOM Storage 以外，HTML5 中還有另外一種數據存儲方式 Web SQL Database。它提供了基本的關系數據庫功能，支持頁面上的復雜的、交互式的數據存儲。它既可以用來存儲用戶產生的數據，也可以作為從服務器獲取數據的本地高速緩存。例如可以把電子郵件、日程等數據存儲到數據庫中。Web SQL Database 支持數據庫事務的概念，從而保證了即使多個瀏覽器窗口操作同一數據，也不會產生沖突。
    示例：（這才是重點啊！） 目前我只嘗試過Application Cache，所以也只給出這個例子。 開發環境：Apache+php+（windows下的safari，chrome，firefox）/ipod touch下的safari 目的：緩存我指定的index.html和其中的jquery.js資源文件。index.html中的圖片不緩存。 文件目錄分布如下： /jqueryapp/ --------------------------------------------- 1.index.html 2.jquery.js 3.tetris.php(可能大家覺得這個文件很奇怪，其實是用來發送manifest的mime type的。不然就要修改apache的mime.types或者用.htaccess，很多人沒有這個條件，比如我) 4.tetris.manifest --------------------------------------------- index.html代碼 [plain]?view plaincopy
  • <!DOCTYPE?html>??
  • <html?manifest="tetris.php">??
  • <head>??
  • ????<meta?charset="utf-8">??
  • ????<meta?name="viewport"?content="width=device-width,?initial-scale=1">??
  • ????<meta?name="viewport"?content="user-scalable=no,?width=device-width,?initial-scale=1.0,?maximum-scale=1.0"/>???
  • ????<meta?name="apple-mobile-web-app-capable"?content="yes"?/>???
  • ????<meta?name="apple-mobile-web-app-status-bar-style"?content="black"?/>???
  • ????<link?rel="apple-touch-icon"?href="iphon_tetris_icon.png"/>???
  • ????<link?rel="apple-touch-startup-image"?href="startup.png"?/>??
  • ??
  • ????<title>appdig</title>??
  • ??
  • ????<script?src="jquery.js"></script>??
  • ??
  • <span?style="white-space:pre">????</span><style?type="text/css">??
  • <span?style="white-space:pre">????????</span>body,div,ul,li,p,span,img{??
  • ????<span?style="white-space:pre">????</span>margin:0px;??
  • ????<span?style="white-space:pre">????</span>padding:0px;??
  • ????<span?style="white-space:pre">????</span>}……??
    • <!DOCTYPE html>是用來聲明它是一個html5文檔。 <html manifest="tetris.php">加上?manifest="tetris.php"來指定資源列表文件。tetris.php就是指定需要緩存的資源文件列表。 tetris.php代碼
     [plain]?view plaincopy
  • <?php??
  • header('Content-Type:?text/cache-manifest');??
  • readfile('tetris.manifest');??
    • 先發送header頭部，確定這是一個text/cache-manifest類型文件。再把tetris.manifest中的列表都進來。 tetris.manifes代碼
     [plain]?view plaincopy
  • CACHE?MANIFEST???
  • ?index.html???
  • ?jquery.js??
    • 有些文章說包涵manifest的html可以不用寫自身。我試了，不寫真的也可以。 再說說manifest的書寫規則吧。 第一行必須寫上CACHE MANIFEST，然后每個資源文件一行，注釋用#。
    后記：關于manifest的mime type聲明 html5提供的這種方法必須保證<html manifest="文本文件">中的文本文件（任意名字和任意擴展名）是text/cache-manifest類型的。即其header必須聲明其類型是text/cache-manifest的。
    其實如果你有修改apache服務器或者別的web服務器的權限你完全可以不用tetris.php這個文件。在index.html中的直接用?<html manifest="tetris.manifest">就可以。 修改apache的mime.types配置文件，在其中加上下面這句。 text/cache-manifest manifest 或者用.htaccess，加添下面那句（我沒嘗試）。 AddType?text/cache-manifest用我上面的方法的好處就是不用修改和添加任何配置文件。利用php來發送header來告訴瀏覽器我是text/cache-manifest類型的。 參考資料： 1.http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/? 非常的詳細講解了離線應用的儲存策略 2.http://www.qianduan.net/local-storage-of-html5.html 3.http://www.yiiyaa.net/1414?詳細講了manifest的用法 4.http://www.zzbaike.com/wiki/Htaccess?講了.htaccess的用法 與50位技術專家面對面20年技術見證，附贈技術全景圖

    總結

    以上是生活随笔為你收集整理的WebApp本地存储 (离线缓存策略策略）的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。