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

A way to emulate a database with HTML5's localStorage

本文关键字：localStorage 模拟 数据库 方法 HTML5 一种      更新时间：2023-09-26

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

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

该网站的工作方式如下：用户在下拉列表中选择一个年份，查询在范围内查找该年份以显示该年份的所有可用品牌。然后，用户选择他的品牌，查询根据该年份/品牌查找可用的模型。

我正在尝试做的是使该过程离线可用，而无需每次都查询在线数据库。

我正在研究本地存储，但它只能存储键值对。所以我看不出如何使用本地存储来做到这一点。WebSQL也不起作用，因为它并非在所有浏览器中都受支持。

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

需要明确的是，我不要求任何代码。我要求对如何实施这一点有一个更大的了解。

我建议使用处理本地存储数据的现有库（在此处列出），这样您就可以向后兼容（cookie）和面向未来的代码（IndexDB/NoSQL/Else）。

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

我会做同样的事情（至少对于一个朴素的解决方案，这对于您的少量数据来说可能没问题），只需使用所有数据创建 JSON 对象并在存储/检索时字符串化/解析它们。（例如，来自另一个线程的答案）

编辑：错误的链接

编辑2：改变未来的技术示例

我在文章

"JavaScript 前端 Web 应用程序教程第 1 部分：在七个步骤中构建最小应用程序"中，在第 2 章 使用 JavaScript 的 LocalStorage API 存储数据中，我描述了如何使用 locaLStorage 以"JSON 表"的形式存储数据，其中解释了如何使用 locaLStorage 管理书籍数据。

您可以将数据存储在 JSON 格式的本地存储中。

但请记住不要超过本地存储容量：本地存储值的最大大小是多少？

相关文章：