Browser Storage and AngularJS

Browser Storage & AngularJs
Storage is an important part of an application. And as web is now a application platform; storage options should be known. So we are going to discuss Browser Storage and AngularJS implementation of Browser Storage. So the client side storage; we will be dealing with; are sessionStorage and localStorage. And to handle these properly in AngularJS, we will also go through Factories and Services in AngularJS.

Session Storage (sessionStorage)

The session storage is used to store the information that’s available for the duration of the page session. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated. And it is available to use as window.sessionStorage. To check whether you can use the sessionStorage or not; you can use window.Storage.

Local Storage (localStorage)

The localStorage is same as sessionStorage but it is persistent and information will sustain after the page is closed. localStorage is available to use as window.localStorage and its availability can be checked in similar way to sessionStorage i.e. by using window.Storage

localStorage and sessionStorage can be seen in the Chrome’s Web Inspector at Resources tab; as shown below:

localStorage & sessionStorage in Chrome Web Inspector

AngularJS way

In AngularJS, nothing is available as a direct object to any controller or any handler function. As AngularJS had dependency injection mechanism; everything has to be passed as a dependency. So to use Storage in our web app; we need to use it through the window object. And to use window object; we need to pass it as a dependency to out code blocks like controllers/factories as $window.

And it will be very clumsy to handle data directly with $window passed as a dependency to controllers. So we will take the help of providers.

AngularJS Providers and Factories

Providers are the data interfaces in angular. You can create providers to interface your application from any source of the data. Source can be any remote location, REST API, device hardwares etc. Providers can be of various kinds like services, factories, values etc.

We will create factory providers to access data from the Storage. These factories, which will create an easy interface for controllers to access data from local/session storage, will have access to the dependencies to access data from and will return an object. This object may contain other functions to facilitate sub methods like get, set etc. Here is the basic code for creating factory in AngularJS.

Now lets see how the Storage works in browser. So initially we will check its availability i.e. local or session storage is available to use or not. For that we can check by window.Storage.

if(window.Storage){ 
    /* handle storage */
}

Now if it’s available then we can create the key value pairs is the storage. To create we can use setKey and to read the value we can use getKey function. All the important functions to work with Storage are listed below:

  • setItem: This function accepts two parameters; first one is the name of the key and second one is the value that needs to be stored against the key; and thus function returns the status.
  • getItem: This function accepts one parameter which is the name of the key and it will return the string value stored against that key. If it fails to get the value; then it will return false.
  • removeItem: This function accepts one parameter which is the name of the key and it will remove that key. If it fails to get the value; then it will return false.
  • clear: This function accepts no parameter and will remove all the items in the storage.

For Example:

Local Storage

Session Storage

So that was a basic code to work with the local and session storage in the browser. Lets go ahead to handle these with the angularJs factories; but before that here is the minimal example of the factory in angularJs:

And the complete storage handling code for both sessionStorage and localStorage is as follows:

Now lets see this above angular storageModule in action. we will use this storageModule as dependency in the ToDo app that we had created in the previous post. And then to store and get the todo task; we will use the storage module; the code looks like as follows:

In above code; we needed only session storage and only one key to be stored and updated; so refactored the factory code according to the todo app needs.
You can see the working demo of this app by going to the demo link; and you can download the files.
Please share your comments/problems/experiences with us.
Happy coding…!

Demo  Download