一种使用HTML5的localStorage模拟数据库的方法

时间:2015-01-08 21:18:04

标签: javascript database html5

我有一个大约600行的小表,看起来像这样:

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

该网站的工作方式如下:用户在下拉菜单中选择一年,查询查找范围内的该年份,以显示该年度的所有可用制作。然后用户选择他的Make并且查询根据该年/ make查找可用的Model。

我要做的是让该流程脱机,而无需每次都在线查询。

我正在调查localStorage,但它只能存储键值对。所以我无法通过localStorage了解如何做到这一点。 WebSQL不会起作用,因为它并不是所有浏览器都支持。

有关如何离线实施此建议的任何建议?用户只需访问该站点一次,然后所有数据都应在本地加载并在本地查询。

要明确我不要求任何代码。我想要了解如何实现这一目标。

3 个答案:

答案 0 :(得分:2)

我建议使用一个处理本地存储数据的现有库(list here),这样你就可以向后兼容(cookies)和未来的代码(IndexDB / NoSQL / Something)。

我认为这与this question非常相似。

我会这样做(至少对于一个天真的解决方案,这可能对你的少量数据来说是好的),只需创建包含所有数据的JSON对象,并在存储/检索时进行字符串化/解析。 (例如answer from another thread

编辑:错误的链接

EDIT2:改变了未来的技术实例

答案 1 :(得分:1)

我已经描述了如何以" JSON表格形式存储数据库表格#34;在我的文章中使用Chapter 2 Storing Data with JavaScript's LocalStorage API中的locaLStorage" JavaScript前端Web应用程序教程第1部分:在七个步骤中构建一个最小应用程序",它解释了如何使用locaLStorage管理书籍数据。

答案 2 :(得分:0)

您可以将数据以JSON格式存储在localstorage中。

但请记住,不要超过本地存储容量:What is the max size of localStorage values?