Managing Key-Value Stores with JavaScript's LocalStorage API

gwagner — Tue, 14 May 2019 20:49:40 +0000

This article is a section from the book Information Management - An Introduction to Information Modeling and Databases.

In a key-value store, the information items are formed by key-value pairs like the phone number directory entry ⟨"Bob", "(732) 516-8970"⟩ or the English-German translation table row ⟨"my car", "mein Auto"⟩.

Well-known key-value store management systems are Redis, Oracle Berkeley DB and the localStorage that is built into the Web programming language JavaScript.

The key in a key-value pair must be unique. Normally, keys are strings. But a key-value DBMS may allow any value supported by the DBMS (strings, numbers, object references, etc.) to be a key. Normally, the value in a key-value pair may be any value supported by the DBMS.

We show how to deal with key-value pairs and how to manage a key-value store using JavaScript, which provides a built-in object called localStorage that allows storing a key-value pair in the following way:

localStorage["Bob Jennings"] = "(732) 516-8970";

JavaScript programs are loaded and executed in the context of a webpage defined with HTML (the ). In our key-value store project, we embed the JavaScript code within the HTML files index.html, add.html, update.html, and delete.html, corresponding to the data management operations Retrieve/List All, Create/Add, Update and Delete. All of these HTML files contain the same navigation menu (in a nav element), allowing to go to any of these pages for performing the corresponding data management operation.

2.1. Retrieving All Key-Value Pairs and Listing Them in a Table

The following HTML code contains a heading (the h1 element), an empty table that will be filled with the help of JavaScript code, a navigation menu (in the nav element), and a script element containing the JavaScript code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="UTF-8" />
 <title>Phone Number Directory</title>
</head>
<body>
 <h1>Phone Number Directory</h1>
 <table>
  <tbody id="directory"></tbody>
 </table>
 <hr/>
 <nav>
  <ul>
   <li><a href="index.html">Home</a></li>
   <li><a href="add.html">Add an entry</a></li>
   <li><a href="update.html">Update an entry</a></li>
   <li><a href="delete.html">Delete an entry</a></li>
  </ul>
 </nav>
 <script>
  ...
 </script>
</body>
</html>

On this "Home" page of our data management app, the currently stored key-value pairs are retrieved from localStorage and shown as table rows. If localStorage is empty, four test data key-value pairs are created and added to the store. This is done by the following JavaScript code, which forms the content of the script element:

<script>
 // get a handle for accessing the "directory" table body element
 let tableBodyEl = document.getElementById("directory");
 // add some key-value pairs if the store is empty
 if (localStorage.length === 0) {
   localStorage["Bob Jennings"] = "(732) 516-8970";
   localStorage["Jane Anselm"] = "(732) 516-4301";
   localStorage["Tara Helms"] = "(504) 972-3381";
   localStorage["Tom Miller"] = "(282) 664-9357";
 }
 // show the contents of the store
 for (let key of Object.keys( localStorage)) {
   let row = tableBodyEl.insertRow();
   row.insertCell().textContent = key;
   row.insertCell().textContent = localStorage[key];
 }
</script>

Exercise: Open a text editor of your choice (e.g., NotePad++). First copy and paste the HTML code above into your editor, then add the JavaScript code in the script element. Make a folder (e.g. with name "KeyValueStoreExample") and save the content of your editor window in this folder as "index.html". Then go to this folder (e.g., using Windows Explorer) and open the "index.html" file in a browser. You should see a page containing a table with 4 phone directory entries as in Table 1-1 above.

2.2. Adding a Key-Value Pair in a User Interface

The following HTML code contains a form element (instead of a table) for allowing the user to enter new key-value pair data in a user interface. The navigation menu (in the nav element) is the same as above and is therefore omitted.

The form-based user interface consists of two labeled input fields (named "key" and "value") and a Save button. Each user interface element is contained in an HTML p element that defines a layout block for it.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="UTF-8" />
 <title>Phone Number Directory</title>
</head>
<body>
 <h1>Phone Number Directory</h1>
 <h2>Add an entry</h2>
 <form>
  <p><label>Name: <input name="key"/></label></p>
  <p><label>Phone no.: <input name="value"/></label></p>
  <p><button type="button" onclick="save()">Save</button></p>
 </form>
 <hr/>
 <nav>...</nav>
 <script>
  function save() {
    let formEl = document.forms[0];  // the 1st form on the page
    localStorage[formEl.key.value] = formEl.value.value;
  }
 </script>
</body>
</html>

The script element only contains the JavaScript code of the save function, which adds the key-value pair entered in the form fields "key" and "value" to the localStorage database.

Exercise: Copy and paste the HTML code, including the script element with its JavaScript code, into a fresh editor window. Don't forget to insert the content of the nav element from the previous subsection. Then save the content of the editor window in your example folder as "add.html". Then open the "add.html" file in a browser. You should see a page containing a user interface as in Figure 2-1 below. Add a name and a phone number and click the Save button. Then click on Home in the menu for checking if your new key-value pair has been added to the store.

Figure 2-1. The user interface of the key-value data management app for the operation Add.

2.3. Deleting a Key-Value Pair

For allowing the user to delete a key-value pair entry from the store, the user interface must provide a facility for choosing the entry to be dropped. For this purpose, HTML provides the select element, which is rendered as a selection field that can be expanded to a list of options to choose from.

The Delete user interface consists of a labeled selection field (named "key") and a Delete button.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="UTF-8" />
 <title>Phone Number Directory</title>
</head>
<body>
 <h1>Phone Number Directory</h1>
 <h2>Delete an entry</h2>
 <form>
  <p><label>Name: <select name="key"></select></label></p>
  <p><button type="button" onclick="destroy()">Delete</button></p>
 </form>
 <hr/>
 <nav>...</nav>
 <script>...</script>
</body>
</html>

The following script element contains the JavaScript code for filling the selection list with option elements and the code of the destroy function, which deletes the selected key-value pair both from the localStorage store and from the selection list.

<script>
 // get a handle for accessing the form element
 let formEl = document.forms[0];
 // get a handle for accessing the "key" selection field
 let selectEl = formEl.key;
 // fill selection list with options
 for (let key of Object.keys( localStorage)) {
   let optionEl = document.createElement("option");
   optionEl.text = key;
   selectEl.add( optionEl, null);
 }
 function destroy() {
   // delete from key-value store
   localStorage.removeItem( selectEl.value);
   // delete also from selection list
   selectEl.remove( selectEl.selectedIndex);
 }
</script>

Exercise: Copy and paste the HTML code into a fresh editor window. Don't forget to insert both the content of the nav element (from a code listing above) and the content of the script element. Save the resulting user interface page in your example folder as "delete.html". Then open the "delete.html" file in a browser. You should see a page containing a user interface as in Figure 2-2 below. Choose a name and click the Delete button. Then click on Home in the menu for checking if the chosen key-value pair has been deleted from the store.

Figure 2-2. The user interface of the key-value data management app for the operation Delete.

2.4. Updating a Key-Value Pair

The Update user interface consists of a labeled selection field (named "key") for choosing the entry to be updated, an input field (named "value") for entering the value (the phone number), and a Save button.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="UTF-8" />
 <title>Phone Number Directory</title>
</head>
<body>
 <h1>Phone Number Directory</h1>
 <h2>Update an entry</h2>
 <form>
  <p><label>Name: <select name="key" onchange="fillForm()"></select></label></p>
  <p><label>Phone no.: <input name="value"/></label></p>
  <p><button type="button" onclick="save()">Save</button></p>
 </form>
 <hr/>
 <nav>...</nav>
 <script>...</script>
</body>
</html>

The following script element contains the JavaScript code for filling the selection list with option elements and the code of the functions fillForm and save. The function fillForm is called when a name has been chosen in the selection field. The save function assigns the updated value from the input field to the selected key in the localStorage store.

<script>
 // get a handle for accessing the form element
 let formEl = document.forms[0];
 // get a handle for accessing the "key" selection field
 let selectEl = formEl.key;
 // fill selection list with options
 for (let key of Object.keys( localStorage)) {
   let optionEl = document.createElement("option");
   optionEl.text = key;
   selectEl.add( optionEl, null);
 }
 // fill form when an entry has been selected
 function fillForm() {
   formEl.value.value = localStorage[selectEl.value];
 }
 // save in key-value store
 function save() {
   localStorage[selectEl.value] = formEl.value.value;
 }
</script>

Exercise: Copy and paste the HTML code into a fresh editor window. Don't forget to insert both the content of the nav element (from a code listing above) and the content of the script element. Save the resulting user interface page in your example folder as "update.html". Then open the "update.html" file in a browser. You should see a page containing a user interface as in Figure 2-3 below. Choose a name such that the associated phone number is shown. Change this phone number and click the Save button. Then click on Home in the menu for checking if the chosen key-value pair has been updated.

Figure 2-3. The user interface of the key-value data management app for the operation Update.

web-engineering.info - LocalStorage

Managing Key-Value Stores with JavaScript's LocalStorage API

2.1. Retrieving All Key-Value Pairs and Listing Them in a Table

2.2. Adding a Key-Value Pair in a User Interface

2.3. Deleting a Key-Value Pair

2.4. Updating a Key-Value Pair

Category: