2015-01-08 67 views
0

我有大約600行的小表,它看起來像這樣的一種方式:效仿與HTML5的localStorage的數據庫

Make | Model  | Year1 | Year2 
Chevy | Silverado | 2000 | 2014 
Chevy | Cobalt | 1988 | 2015 

該網站是這樣的:用戶選擇一個單一年份的下拉菜單和查詢查找範圍內的該年份以顯示該年的所有可用權限。然後用戶選擇他的Make,查詢將根據當年/ make查找可用的Model。

我想要做的是使該進程可脫機使用,而無需每次查詢在線數據庫。

我在調查localStorage,但它只能存儲鍵值對。所以我不明白我能用localStorage做到這一點。 WebSQL將無法正常工作,因爲它在所有瀏覽器中都不受支持。

關於如何離線實施的建議?用戶只需要訪問一次網站,然後所有的數據應該在本地加載並在本地查詢。

只是爲了清楚我沒有要求任何代碼。我要求瞭解如何實現這一目標的全景圖。

+0

可以存儲在序列化數組或json中對其進行編碼。不知道你需要什麼空間的表格,如果它適合在本地存儲,但它的值得去 – zgr024

+0

它是否是本地存儲,你可以不使用Web SQL數據庫 – ShiftyThomas

回答

1

我會建議使用在本地處理存儲數據的現有庫(list here),所以你必須向後兼容(餅乾)和麪向未來的代碼(INDEXDB/NoSQL的/別的東西)。

我認爲這與this question非常相似。

我會這樣做(至少對於一個天真的解決方案,這可能適用於您的少量數據),只需創建包含所有數據的JSON對象並在存儲/檢索時對其進行字符串化/解析即可。 (如answer from another thread

編輯:錯誤的鏈接

EDIT2:改變未來的技術實例

+0

請注意,WebSQL已折舊,稱它爲「未來驗證碼」。另外,我認爲不再需要庫,因爲HTML5的localStorage已經支持了很長時間(從IE 9開始)。 –

+0

謝謝@gwag,不知道它已被棄用,但我有一段時間沒有聽說過它 – mpd

1

我所描述的如何存儲在「JSON表」與localStorage的在Chapter 2 Storing Data with JavaScript's LocalStorage API在我的文章「形式DATABSE表JavaScript前端Web應用程序教程第1部分:七步構建最小應用程序「,它解釋瞭如何使用locaLStorage管理圖書數據。

+0

真棒謝謝。 – OutFall