HTML5 IndexedDB:輕量級NoSQL數據庫

IndexedDB是HTML5-WebStorage的重要一環，是一種輕量級NoSQL數據庫。

w3c為IndexedDB定義了很多接口，其中Database對象被定義為IDBDataBase。

瀏覽器對象中，實現了IDBFactory的只有indexedDB這個實例。

五步創建HTML5離線Web應用

在HTML5提供的所有炫酷功能里，創建離線緩存網頁是我最喜歡的一個特性，以下是五步快速創建HTML5離線Web應用的步驟

1. 第一步：創建一個有效的HTML5文檔，HTML5 doctype比xhtml更易于識記。

創建一個名為index.html的文件，這里學習如何使用CSS3來策劃網站布局。

2. 新增.htaccess支持

我們要創建的緩存頁面稱為manifest文件，假設你所使用的服務器是Apache，我們在創建文件之前，需要往.htaccess文件新增一個指令。

打開.htaccess文件，該文件部署在網站的根目錄下，新增以下代碼：

AddType text/cache-manifest .manifest

該指令可以確保每一個.manifest文件文本高速緩存。如果該文件不存在，整個緩存效果就無法實現，頁面也不能實現離線緩存。

3. 創建.manifest文件

在我們創建好了.manifest文件后，事情就變得有趣多了。創建好新文件，命名為offline.manifest，嵌入以下代碼。

CACHE MANIFEST

#Thisisa comment

CACHE

index.html

style.css

image.jpg

image-med.jpg

image-small.jpg

notre-dame.jpg

現在你擁有了一個完美的manifest列表。其實原理很簡單，在聲明CACHE后，你可以列出自己想要離線緩存的文件。這個對于緩存一個簡單的網頁，已經是綽綽有余了，而HTML5的緩存有其它一些有趣的功能。

CACHE MANIFEST

#Thisisa comment

CACHE

index.html

style.css

NETWORK:

search.php

login.php

FALLBACK:/api offline.html

在這個示例中，manifest文件聲明了CACHE，用于緩存index.html和style.css。同時，我們聲明了NETWORK，用于指定不被緩存的文件，比如登錄頁面。

最后聲明的是FALLBACK，這個聲明允許將用戶轉入一個指定的頁面，比如本例中如果不打算離線查看API資源的話，可以轉向Off.html頁面。

4. 將manifest 文件鏈接到HTML文檔中。

在manifest文件和主要的html文檔準備好了以后，你唯一還需要做的事情是將manifest文件鏈接到html文檔中。

操作方法很簡單，只需在html元算中添加manifest 屬性，代碼如下：

5. 測試

一旦完成好以后，可以開始測試了。如果你使用Firefox 3.5+來訪問index.html文件，你可以看到下面的圖片。

像其它的瀏覽器，比如(Chrome, Safari, Android 和 iPhone) 不會彈出文件緩存的相關提示，文件會自動緩存。

Firefox: 3.5+、Safari: 4.0+、Chrome: 5.0+、Opera: 10.6+、iPhone: 2.1+、Android: 2.0+都對這種技術提供支持，IE不支持。

總結

以上是生活随笔為你收集整理的html5缓存的功能,HTML 5新特性:Web应用缓存实现离线浏览的全部內容，希望文章能夠幫你解決所遇到的問題。

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