Save information on Client using AngularJS

Today we are implementing exceptionally straightforward case of how to save object value or any information on client side using in AngularJS.There are many options to store information.

In this Blog I am going to give some example on "How to save information on client machine". Now we are implementing a set of example with straightforward case of how to save object value or any information on client side using in AngularJS. In this blog I am giving you many method to save information on client machine which is listed below.

1. LocalStorage
2. Sessionstorage
3. Window storage
4. Cookies storage

1. LocalStorage - Localstorage is used to store any type of information, data, object. See example on how to set and get value.

// olditem ==Your object value or information
getitem :-
localStorage.getItem('history');
//history is key
Remove item:-
$scope.RemoveHistory = function (item,index) {
var historyData = localStorage.getItem('history');
var parsedData = JSON.parse(historyData);
for (i = 0; i < parsedData.length; i++) {
//check condition (optional)
if (parsedData[i].UserName === item.UserName && parsedData[i].source === item.source && parsedData[i].destination === item.destination)
{
parsedData.splice(i, 1);
//Remove item using index and set again in same key "history".
localStorage["history"] = JSON.stringify(parsedData);
}
}

2. Sessionstorage - Using sessionstorage you will store key pair value. See example below.

 

sessionStorage.setItem('key', 'value');

var data = sessionStorage.getItem('key');

 

3. Window storage - Its same as session storage. See example.

 

window.localStorage.setItem("key", Value);

var data=window.localStorage.getItem("UserToken");

 

4. Cookies storage - Once you want use $cookies, firstly inject library in your application. See example below.

angular.module('cookiesExample', ['ngCookies']) .controller('ExampleController', ['$cookies', function($cookies) {
// Retrieving a cookie
var favoriteCookie = $cookies.get('myFavorite');
// Setting a cookie
$cookies.put('myFavorite', value);
}]);

Use $cookiesProvider to change the default behavior of the $cookies service.

 

Note - Don't forget to add respective directive for storage option.best option is localstorage than other.

 

Difference between localStorage ,sessionStorage and Cookies

 

As far as abilities, Cookies just permit you to store strings. sessionStorage and localStorage permit you to store JavaScript primitives yet not Objects or Arrays (it is conceivable to JSON serialize them to store them utilizing the APIs). Session stockpiling will by and large permit you to store any primitives or items upheld by your Server Side dialect/system.