Storing Database Tables in JavaScript's Local Storage

In most apps, we have some form of data management where data is represented in tables such that table rows correspond to objects, and the table schema corresponds to the objects' type. When building a front-end web app with JavaScript, the simplest approach for persistent data storage is using JavaScript's localStorage API, which provides a simple key-value database, but does not support database tables. So, the question is: how can we store and retrieve tables with Local Storage?

We show how to represent database tables in JavaScript in the form of (what we call) JSON tables, and how to store these tables in Local Storage.

The JavaScript Object Notation (JSON) defines a concise syntax for JavaScript array literals (lists) and JavaScript object literals (maps):

• Lists are expressed as comma-separated lists of data literals enclosed in brackets:

  ["penguin", "arctis", "snow"]

• Maps are expressed as comma-separated lists of key-value slots enclosed in curly braces:

  {"id": 2901465, "my phone number":"0049.30.227109"}

  A record is a special type of map where the keys are admissible JavaScript identifiers denoting properties, so they need not be enclosed in quotation marks in JavaScript code. For example, {id: 2901465, phone:"0049.30.227109"} is a record. The value of a property in a record, or the value associated with a key in a map, may be a simple data literal, or an array literal, or another object literal as in:

  {tags:["penguin","arctis"], photographer:{"last":"Wagner","first":"Gerd"}}

We define a JSON table as a set of records (or table rows) such that each record represents an object with a standard identifier property slot. Consequently, a JSON table can be represented as a map of records such that the keys of the map are the values of the standard identifier property, and their associated values are the corresponding records, as illustrated by the following example:

The Local Storage database managed by the browser and associated with an app is exposed as the built-in JavaScript object localStorage with the methods getItem, setItem, removeItem and clear. However, instead of invoking getItem and setItem, it is more convenient to handle localStorage as a map, writing to it by assigning a value to a key as in localStorage["id"] = 2901465, and retrieving data by reading the map as in var id = localStorage["id"]. The following example shows how to create a JSON table and save its serialization to Local Storage:

var persons = {};
persons["2901465"] = {id: 2901465, name:"Tom"};
persons["3305579"] = {id: 3305579, name:"Su"};
persons["6492003"] = {id: 6492003, name:"Pete"};
try {
  localStorage["personTable"] = JSON.stringify( persons);
} catch (e) {
  alert("Error when writing to Local Storage\n" + e);
}

Notice that we have used the predefined method JSON.stringify for serializing the JSON table persons into a string that is assigned as the value of the localStorage key "personTable". We can retrieve the table with the help of the predefined de-serialization method JSON.parse in the following way:

var persons = {};
try {
  persons = JSON.parse( localStorage["personTable"]);
} catch (e) {
  alert("Error when reading from Local Storage\n" + e);        
}

For an example with full source code, see this tutorial.