體面的html5離線存儲和緩存示例

Question

我很想測試HTML離線存儲和緩存，以開發原型來展示html5的離線web應用程序功能。

我發現一些具體的WebKit的樣本，但我掙扎着找到任何像樣的代碼示例，即使在Firefox 3.6中

在所有的工作對於一個樣品，我很高興有一些作品與以下內容：

• 我們公司廣泛使用jquery，所以我更喜歡使用該庫或純JavaScript的示例。
• 它應該在Firefox上至少工作（3.6+是罰款）

任何人都可以點我的一些鏈接，提供一些指導和代碼示例？

Answer 1

見http://hacks.mozilla.org/?s=localStorage

Firefox不支持SQL數據庫API，如果這就是你要找的內容。

Answer 2

我建議您查看CSS Ninja的Font Dragr demonstration，它雖然主要用於演示使用Firefox的HTML5的File API，但也使用脫機存儲。

如果沒有別的，這個人知道他的東西，並可以提出很好的例子。

Answer 3

最近我發現了這個相當不錯的html5演示頁面，所以我認爲我會在這裏發佈它。

html5demos.com

編輯 - 另一個鏈接，可以幫助：

從谷歌Chrome開發團隊來自HTML5ROCKS，一個網站能提供和HTML5的真棒新功能，站長們的教育。

www.html5rocks.com

編輯＃2 - 這是我遇到卻把最好的文章之一：

wrapping things nicely with html5 local storage

Answer 4

我發現這個例子中，它是最簡單的/最好的事情我已經看到了本地存儲。它只演示本地（持久）存儲，而不是數據庫存儲。另外，如果你想會話存儲，只需更改「的localStorage」來的sessionStorage」

的JavaScript不能我認爲，任何簡單。

w3.org example

是的，它工作正常FF（在）

Answer 5

現在所有的主流瀏覽器都支持瞭解離線存儲，所以我建立了一個用於處理表單狀態的jQuery插件。http://www.jasonsebring.com/dumbFormState源代碼很小且易於理解。

我推薦使用道格拉斯克羅克福德的JSON2.stringify： https://github.com/douglascrockford/JSON-js來做序列化的方法來獲取JavaScript中的一個對象並將其轉換爲JSON字符串。然後可以將該保存要麼window.sessionStorage或window.localStorage容易像這樣：

//設置數據

window.sessionStorage [ 'MYDATA'] = JSON.stringify（someObject）;

//得到它回

someObject = jQuery.parseJSON（window.sessionStorage [ 'MYDATA']）;

另一件需要考慮的就是命名您的密鑰。對於我正在做的事情，我希望它自動生成，所以鍵名是基於'dumbFormState-'+ window.location.pathname + ' - '+表單索引保存的，以確保密鑰自動唯一，然後您可以循環執行它們通過檢查與他們鍵匹配的前綴'dumbFormState-'來刪除它們，因爲您不想刪除那些人們可能使用的其他東西。

希望能有所幫助。