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

Question

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

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

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

我想要做的是使该进程脱机，而无需每次都查询在线数据库。

我正在研究localStorage，但它只能存储键值对。 所以我看不出我如何用localStorage做到这一点。 WebSQL无法正常工作，因为并非所有浏览器都支持它。

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

为了清楚起见我不是要求任何代码。 我要求更全面地了解如何实现这一点。

Answer 1

我建议使用一个处理本地存储数据的现有库（ 此处列表 ），因此您具有向后兼容性（cookie）和未来证明代码（IndexDB / NoSQL /其他）。

我认为这与这个问题非常相似。

我会这样做（至少对于一个天真的解决方案，这可能对你的少量数据来说是好的），只需用所有数据创建JSON对象，并在存储/检索时进行字符串化/解析。 （例如， 从另一个线程回答 ）

编辑：错误的链接

EDIT2：改变了未来的技术示例

Answer 2

我在文章“JavaScript前端Web应用程序教程第1部分：在七个步骤中构建一个最小应用程序”中描述了如何使用locaLStorage以“JSON表”的形式存储数据库表和第二章存储数据与JavaScript的LocalStorage API ，这解释了如何使用locaLStorage管理图书数据。

Answer 3

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

但请记住不要超过localstorage容量： localStorage值的最大大小是多少？