Monday, July 23, 2018

Learn LocalStorage,SessionStorage in Angular with example

In my previous Article, Learned Html5 web storage APIs with examples.

In this tutorial, we are going to implement LocalStorage and Session storage using the Angular framework
We are going to use ngx-webstorage library in our application

Ngx-webstorage library Introduction

This provides wrapper classes for managing LocalStorage and SessionStorage objects from Angular 2 Applications. When your applications need access to web storage API, You can directly call those API's as these are inbuilt support in HTML5. But you have to write a lot of code to handle all use cases. instead, use popular libraries like ngx-webstorage. With external libraries, You have advantages when browser not supporting Web storage API, they have an inbuilt mechanism to default to basic memory.Angular2 applications are typescript based. We need a library which is based on the typescript. This provides easy services which you can integrate into your Angular 4 application. There are a lot of other modules are there which do the same thing, but this module has support for future versions. This has support for NPM package manager

install ngx-webstorage using npm 

First download ngx-webstorage library using npm command below
npm install --save ngx-webstorage. 
This installs as project dependency and saves under project node_module folder. --save option update this module to package.json with below entry under dependencies sections
"ngx-webstorage": "^2.0.1",
configure in Angular Application, Once installed, First need to register module in your Root module, For that, import Ng2Webstorage in your main module. Ng2Webstorage has different services LocalStorageService - service wrapper for LocalStorage SessionStorageService - service wrapper for SessionStorage
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {Ng2Webstorage} from 'ngx-webstorage';
 
@NgModule({
    imports: [
        BrowserModule,
        Ng2Webstorage,

    ],
})
export class AppModule {
}
Next step is to inject the services - LocalStorageService,SessionStorageService into your component as per below example
import {Component} from '@angular/core';
import {LocalStorageService} from 'ngx-webstorage';
 
@Component({
    selector: 'storageTest',
    template: `
        
`, }) export class StorageComponent { attribute; constructor(private storage:LocalStorageService) {} // save the data using store methods this.storage.store('key', 'test'); //retrieve using the key in string this.storage.retrieve('key'); }
instead of directly inject into the component, Always write a code which does all the operations related to this service in a common utility service API, so that all components can be reused like this. SessionStorageService also does the provides same methods like LocalStorageService

 @LocalStorage @SessionStorage Decorators 

Decorators are used to decorating classes and methods like annotations in java language. Please see the below example how the code is updating session storage with decorators
   @SessionStorage('key')
    mykey;
 
    modifyValue() {
        this.mykey.push('testvalue for a key');
        this.mykey = this.mykey; 
    }
The same code works in Angular 2,4,5 and 6 versions.

ngx web storage methods 

The below methods available for both local storage as well as session storage

Store( key: string, value: any ): void 
    -save the key and value if the key doesn't exist. if the key exists, update value.
Retrieve( key:string ):any 
   - this retrieve the value for a specific key
Clear( key?: string ): void 
   - this removes   storage for specific key
IsStorageAvailable(): boolean 
   -This returns true, if local storage/ session storage support available returns false, if not supported
Observe( key?: string ): EventEmitter
   -This returns Event Emitter and used to observe the key of the storage object

Please ping me if you have any questions/need more clarifications

Related article