Local Storage in Ionic 2

Share On Facebook
Share On Google Plus
Share On Linkedin
Contact us

What is Local Storage

     Local storage is a kind of the Web Storage. It is the web application protocols and methods by which we can easily store data in the web browser storage or simply store data client side. Local storage is also helpful in reducing the server load, as data which has to be accessed frequently, can be stored in the local storage and not need to be fetched again and again from the server. Local storage can be used to store the user credentials in a secure way, that easily authenticate the user without having him to login again,example:- we can store the token of user in local storage, in token based REST authentication system.

     Obviously we have the storage at client side,i.e. Local storage which can be leveraged in many ways, making our web applications or mobile hybrid applications more productive. Local storage is supported by almost every browser, like IE8(Internet Explorer 8) and later, Mozilla Based browser, google chrome, opera, safari etc.

     It is very easy to use, i.e. very simple syntax, shown as follows. Browsers which supports web storage have two global variables, sessionStorage and localStorage at the window object level. To use the local storage we use localStorage variable as:-

same for the session storage

Local Storage is different from session Storage as:- the data stored using the local Storage persist even after closing and re-open the browser while session Storage data will be deleted with the closing of browser and cannot be retrieved after open the browser again.

Local storage in Ionic 2

     Ionic 2 makes simple easy for the mobile apps to store data. Ionic 2 storage store data in key/value pairs, the value may be a simple string or a complex JSON Object. Ionic 2 supports many ways to store the data, SQLLite(using cordova-sqlite-storage plugin), WebSql, IndexedDb. I recomment the use of SQLLite storage which is more reliable in many senerios. To get more about Ionic 2 Storage click here. Now a simple example to use the Localstorage in ionic 2:-

Local storage in ionic 2 - get set clear the local storage data

local storage service – localstorage.ts

Provide the Storage service(import from @ionic/angular) and local storage service in App Module

Use local storage service in App component

This way we can use local storage in Mobile Apps using Ionic 2. For more tutorials Keep visiting this site and also check my Git repositories from https://github.com/tusharcoder?tab=repositories

Leave a Reply

Your email address will not be published. Required fields are marked *