How to make a local offline database

Question

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?

---

Responding to comments:

"You said you know how to use localStorage... so what seems to be the problem?"

@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?

Any implementation will probably depend on what browser(s) your users prefer to use.

@paul I think chrome will be most popular.

---

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.

What solved my problem was using WebDB or WEBSQL (I think it was called something like that that).

Solution

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.

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?

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.

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.

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.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 :) .