16

我正在使用 HTML、CSS 和 JavaScript 制作待办事项列表应用程序，我认为存储数据的最佳方式是本地数据库。我知道如何使用localStorageand sessionStorage，我也知道如何使用在线MySQL数据库。但是，此应用程序必须能够离线运行，并且应该离线存储其数据。
有没有办法只用 HTML 和 JavaScript 来做到这一点？

回复评论：

“你说你知道怎么用localStorage……那看起来有什么问题？”

@Lior我所知道的localStorage是，您可以将单个结果存储为变量，而我希望存储具有不同列的行，其中包含有关对象的不同数据。但是，可以localStorage容纳一个对象，如果是这样，它是用通常的对象表示法引用的吗？

任何实现都可能取决于您的用户喜欢使用的浏览器。

@paul 我认为 chrome 将最受欢迎。

好的，我想澄清一下我所问的确实是我如何使用 JavaScript 和 HTML 来做到这一点，而不是有没有办法只用 HTML 和 JavaScript 来做到这一点？. 基本上，我想要一种将其内容保存在用户机器上而不是在线上的 SQL 数据库。

解决我的问题的是使用 WebDB 或 WEBSQL（我认为它被称为类似的东西）。

4

1 回答 1

17

我回答这个问题大约晚了 3 年，但考虑到当时没有关于可用选项的实际讨论，并且 OP 最终选择的数据库现在已弃用，我想我会投入两分钱就此事。

首先，需要考虑是否真的需要客户端数据库。进一步来说...

  • 您需要数据项之间的显式或隐式关系吗？
  • 查询上述项目的能力如何？
  • 或者超过5 MB的空间？

如果您对以上所有问题的回答都是“否”，请使用 localStorage，让自己免于 WebSQL 和 IndexedDB API 的烦恼。好吧，也许只是后者令人头疼，因为如前所述，前者已被弃用。

否则，就本地客户端数据库而言，IndexedDB 是唯一的选择，因为它是唯一保留在 W3C 标准轨道上的数据库。

如果您想利用这些设施中的任何一个，以及更多，而无需编写低级存储操作代码，请查看BakedGoods 。有了它，例如，将数据放在客户端支持的第一个遇到的本地数据库中，就像这样简单：

bakedGoods.set({
    data: [{key: "key1", value: "val1"}, {key: "key2", value: "val2"}],
    storageTypes: ["indexedDB", "webSQL"],

    //Will be polyfilled with defaults for equivalent database structures
    optionsObj: {conductDisjointly: false},

    complete: function(byStorageTypeStoredKeysObj, byStorageTypeErrorObj){}
});

哦，为了完全透明，BakedGoods 由这个人在这里维护 :)。

于 2016-07-10T21:43:34.780 回答