webstorage in depth

Nerd, Solutions 

Webstorage, this is the mechanism that allow JavaScript programmer to store data local in the user's browser. In webstorage realm we can find (local storage and session storage), Web SQL database, and IndexDB.


Local Storage and Session Storage

In a simple word, the web storage API is cookies on steroids. In storage API we can find two different API, session storage and local storage.

The only difference between these two is; session storage is only available to that window until the window is closed and local storage data are tied to a particular origin and spans all windows that are open on that domain. It also remains available until its explicitly deleted either by web application or by the user.

Local storage and session storage both have the same syntax, because they are both descend from storage API. The API makes setting and getting data very easy. To set data we use the setItem method, which takes two parameter; key and value. To get data we use the getItem method, which takes only one parameter; key.

Also the API provides another useful method,key. This method takes one parameter, which is an index and return the associated key.

Removing Data

To remove data from a local storage we use one of these methods, removeItem and clear. The removeItem method will take a single parameter, which is the key of the item we want to remove from local storage. clear, this method can be used when we want to delete all items, that are stored in the local storage.

Because local storage is a normal object, we can use the delete keyword, which is normally used to remove property of object to achieve the same effect as the method removeItem.

Storage Events

What makes web storage particularly unique is that it also comes withe events that notify you of updates to the data store. The first thing to know is that the storage event doesn't fire on the window storing the actual data, it will only fire on the other windows whose storage is affected.

When the event fires, it also contains all the information about the data change as you can see from the storage event object.

 Web SQL database

Web SQL database is another way to store and access data locally in the browser. As the name implies this is a real database that you are able to query and join results.

Open and creating databases

By opening the databases for the first time, the database is created. This is the code example you can use to open the new database.

Code example:

This code, first check if the Web SQL is supported by checking, if windows object has openDatabase property. If the browser support Web SQL, we are creating the new database by using openDatabase method. This method takes four parameter, the first one is the name of the database, the second parameter is the version of the database, the third parameter is the display name of the database, and the four parameter is the size of the database we are creating in bytes.

Creating Tables.

When you creating tables or performing any other action on the database you must start a database transaction and within the callback, execute the relevant SQL. The transaction object, which allows to run SQL statements and run the executeSql method.

 Code example

 The executeSql method takes four arguments, of which only the first is required. The first argument is the SQL statement we execute, the second argument represents arguments that we want to send to SQL statement (such as field values), the third argument is a callback function that will be called when the query execute successfully, and the last argument is the callback function that will be called when the query fail to execute successfully.

 Inserting and Querying the database

We can also perform normal database operations, like inserting and retrieve data from the database.

To insert data into the database we use this syntax:

Code example:

Each ? in the INSERT statement act as the placeholder for the insert values that are passed as array in the third argument of executeSql.


indexedDB is a document object store. it's like a database, but it doesn't come with all SQL and relational database capabilities.

in indexedDB, you create a new database and give it a name and a version so you can reopen it later. Then you create an object store, which is very much like a filling cabinet with indices that allow you to quickly skim through and find the right document.

Creating new indexedDB

In order to start using indexedDB, we need to create one first. We create a new indexedDB by employ open method of indexedDB. This method will return an instance of the database that we created. We use the returned instance to execute all our commands and query to the database.

Code example

One of indexedDB characteristics is that, indexedDB is event driven data storage. Like in the above example code, you can see that, there is event handlers attached to the database instance for every event.

Assuming the database is open, the onsuccess event will be fire. Before we can create the new object store we need to begin by doing two things.

The success event handler passes along an event object. inside this event we look for the property named target, and inside of that is the result.

We need to store the result value, because that is the reference for the created indexedDB.

Code example