HTML5/Js client-side DB

Question

We're starting development of a client application. No servers, just HTML5/JS. How to organize a local, non-relational, read-only, one-table DB?

Message | Img | Code
----------------------------------
File not found | error.png | 15
Access denied | error.png | 42

We want to query row(s) by a field, say, 'Code = 15'. All files should be local.

Regards,

Answer 1

If you need cross browser support then I would recommend localStorage.

There is a nice abstraction. store.js that allows you to store keyvalue pairs in the local storage.

Alternatively if you want proper SQL you can use Web SQL but wikipedia claims it's only supported by Opera/Safari/Chrome.

Example of store:

var Row = {
 Message:"File Not Found",
 Img: "error.png",
 Code: 15
}
store.set(Row.Code, Row);
...
store.get("15");

It does rely on JSON which is supported by modern browsers and IE8+. To support older browsers use json2

• noober: 1. How to load a table to the storage the first time? 2. The table has multiple columns, using pairs requires more than a single query.
• noober: No, I don't need SQL. Getting a dataset object(s) with a condition ('field =value') is enough.
• Raynos: @noober updated with an example. localStorage is a document storage so it's noSQL. You store JSON data by (unique) key.
• noober: If I have the table in JS initially, I'd better write a function with operator 'for'. I want to keep the data separately, say, in XML. Since it looks impossible to read local XML file, the best solution is design-time [XML]->[JS array] converter.
• Raynos: @noober or keep the the data in JSON rather then XML. Then include it as <script>