I'm making a to-do list application with HTML, CSS, and JavaScript, and I think the best way for me to store the data would be a local database. I know how to use localStorage and sessionStorage, and I also know how to use an online MySQL database. However, this application must be able to run offline and should store its data offline.
Is there a way I could do this with just HTML and JavaScript?
我正在使用HTML，CSS和JavaScript制作待办事项列表应用程序，我认为存储数据的最佳方式是本地数据库。我知道如何使用localStorage和sessionStorage，我也知道如何使用在线MySQL数据库。但是，此应用程序必须能够脱机运行并且应该脱机存储其数据。有没有办法只使用HTML和JavaScript来做到这一点？
Responding to comments:
回应评论：
"You said you know how to use
localStorage... so what seems to be the problem?"“你说你知道如何使用localStorage ......所以这似乎是什么问题？”
@Lior All I know about localStorage is that you can store a single result, as a variable whereas I wish to store a row with different columns containing diffenent data about the object. However, can localStorage hold an object and if so is it referenced with the usual object notation?
@Lior我所知道的localStorage就是你可以将一个结果存储为一个变量，而我希望存储一个包含不同列的行，其中包含有关该对象的不同数据。但是，localStorage可以保存一个对象，如果是这样，它是用通常的对象表示法引用的吗？
Any implementation will probably depend on what browser(s) your users prefer to use.
任何实现都可能取决于您的用户喜欢使用哪种浏览器。
@paul I think chrome will be most popular.
@paul我认为chrome最受欢迎。
Okay, I would like to clarify that what I was asking was indeed How can I do this with JavaScript and HTML rather than Is there a way I could do this with just HTML and JavaScript?. Basically, I wanted a type of SQL database that would save its contents on the user's machine instead of online.
好的，我想澄清一下，我所问的确实是如何使用JavaScript和HTML来实现这一点，而不是仅仅用HTML和JavaScript来实现这一点？基本上，我想要一种SQL数据库，它可以将其内容保存在用户的机器而不是在线。
What solved my problem was using WebDB or WEBSQL (I think it was called something like that that).
什么解决了我的问题是使用WebDB或WEBSQL（我认为它被称为类似的东西）。
1 个解决方案
#1
11
I'm about 3 years late in answering this, but considering that there was no actual discussion on the available options at the time, and that the database that OP ended up choosing is now deprecated, I figured i'd throw in my two cents on the matter.
我回答这个问题已经晚了大约3年，但考虑到当时没有关于可用选项的实际讨论，而OP最终选择的数据库现在已被弃用，我想我会投入两分钱就此事。
First, one needs to consider whether one actually needs a client-side database. More specifically...
首先，需要考虑一个人是否真的需要客户端数据库。进一步来说...
- Do you need explicit or implicit relationships between your data items?
- 您是否需要数据项之间的显式或隐式关系？
- How about the ability to query over said items?
- 查询所述项目的能力如何？
- Or more than 5 MB in space?
- 或者超过5 MB的空间？
If you answered "no" to all of the above, go with localStorage and save yourself from the headaches that are the WebSQL and IndexedDB APIs. Well, maybe just the latter headache, since the former has, as previously mentioned , been deprecated.
如果您对上述所有问题的回答都是“否”，那么请使用localStorage，避免出现WebSQL和IndexedDB API的问题。好吧，也许只是后者的头痛，因为如前所述，前者已被弃用。
Otherwise, IndexedDB is the only option as far as native client-side databases go, given it is the only one that remains on the W3C standards track.
否则，就本机客户端数据库而言，IndexedDB是唯一的选择，因为它是唯一保留在W3C标准轨道上的数据库。
Check out BakedGoods if you want to utilize any of these facilities, and more, without having to write low-level storage operation code. With it, placing data in the first encountered native database which is supported on a client, for example, is as simple as:
如果您想利用这些设施中的任何一个，请查看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){}
});
Oh, and for the sake of complete transparency, BakedGoods is maintained by this guy right here :) .
哦，为了完全透明，BakedGoods由这个人维持在这里:)。
#1
11
I'm about 3 years late in answering this, but considering that there was no actual discussion on the available options at the time, and that the database that OP ended up choosing is now deprecated, I figured i'd throw in my two cents on the matter.
我回答这个问题已经晚了大约3年，但考虑到当时没有关于可用选项的实际讨论，而OP最终选择的数据库现在已被弃用，我想我会投入两分钱就此事。
First, one needs to consider whether one actually needs a client-side database. More specifically...
首先，需要考虑一个人是否真的需要客户端数据库。进一步来说...
- Do you need explicit or implicit relationships between your data items?
- 您是否需要数据项之间的显式或隐式关系？
- How about the ability to query over said items?
- 查询所述项目的能力如何？
- Or more than 5 MB in space?
- 或者超过5 MB的空间？
If you answered "no" to all of the above, go with localStorage and save yourself from the headaches that are the WebSQL and IndexedDB APIs. Well, maybe just the latter headache, since the former has, as previously mentioned , been deprecated.
如果您对上述所有问题的回答都是“否”，那么请使用localStorage，避免出现WebSQL和IndexedDB API的问题。好吧，也许只是后者的头痛，因为如前所述，前者已被弃用。
Otherwise, IndexedDB is the only option as far as native client-side databases go, given it is the only one that remains on the W3C standards track.
否则，就本机客户端数据库而言，IndexedDB是唯一的选择，因为它是唯一保留在W3C标准轨道上的数据库。
Check out BakedGoods if you want to utilize any of these facilities, and more, without having to write low-level storage operation code. With it, placing data in the first encountered native database which is supported on a client, for example, is as simple as:
如果您想利用这些设施中的任何一个，请查看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){}
});
Oh, and for the sake of complete transparency, BakedGoods is maintained by this guy right here :) .
哦，为了完全透明，BakedGoods由这个人维持在这里:)。