Post
Ask Question

JavaScript Local Storage Implementation Using Anonymous Functions

Introduction

 
 The local storage property of JavaScript allows us to access the local storage object. It is similar to the session storage but the only difference is that the local storage has no expiration time.
 
Core Implementation procedure
 
 The following code snippet accesses the current domain’s local storage object and adds a data item to it using Storage.setItem().
  1. localStorage.setItem('ObjectName', 'ObjectValue');  
Our full JavaScript anonymous function will be as in the following code snippet:
  1. var Demo = function() {  
  2.     var sendRequest = function(o) {  
  3.         $.ajax({  
  4.             type: "POST",  
  5.             url: '/Home/GetResponseAjax',  
  6.             contentType: "application/json; charset=utf-8",  
  7.             dataType: "json",  
  8.             data: JSON.stringify({ university: o }),  
  9.             cache: false,  
  10.             beforeSend: function () {},  
  11.             success: function (result) {  
  12.                 if (result) {  
  13.                     alert('sent');  
  14.                 }  
  15.             },  
  16.             complete: function () {},  
  17.             async: true  
  18.         });  
  19.     }  
  20.   
  21.     var getResponse = function () {  
  22.         $.ajax({  
  23.             type: "POST",  
  24.             url: '/Home/SendUniversityInfoAjax',  
  25.             contentType: "application/json; charset=utf-8",  
  26.             dataType: "json",  
  27.             data: JSON.stringify({}),  
  28.             cache: false,  
  29.             beforeSend: function () { },  
  30.             success: function (result) {  
  31.                 if (result != null) {  
  32.                     localStorage.setItem('Info', JSON.stringify(result));  
  33.                     alert('received and saved to local storage');  
  34.                 }  
  35.             },  
  36.             complete: function () { },  
  37.             async: true  
  38.         });  
  39.     }  
  40.   
  41.     var actionHandler = function () {  
  42.         $('.get-response').unbind('click').on('click', function () {  
  43.             debugger;  
  44.             getResponse();  
  45.         });  
  46.   
  47.         $('.read-data').unbind('click').on('click', function () {  
  48.             debugger;  
  49.             var info = JSON.parse(localStorage.getItem('Info'));  
  50.             var o = {};  
  51.             o.Name = info[0].Name;  
  52.             o.Location = info[0].Location;  
  53.             o.NumberofTeachers = info[0].NumberofTeachers;  
  54.             o.NumberofStudents = info[0].NumberofStudents;  
  55.             sendRequest(o);  
  56.         });  
  57.     }  
  58.   
  59.     var initialize = function () {  
  60.         actionHandler();  
  61.     }  
  62.   
  63.     return {  
  64.         init: function () {  
  65.             initialize();  
  66.         }  
  67.     };  
  68. }();  
And the two Action methods will be the following:
  1. public ActionResult SendUniversityInfoAjax()  
  2. {  
  3.     var info = new University  
  4.     {  
  5.         Name = "Jahangirnagar University",  
  6.         Location = "Dhaka",  
  7.         NumberofTeachers = 2000,  
  8.         NumberofStudents = 15000  
  9.     };  
  10.     var infoList = new List<University> {info};  
  11.     return Json(infoList, JsonRequestBehavior.AllowGet);  
  12. }  
  13.   
  14. public ActionResult GetResponseAjax(University university)  
  15. {  
  16.     var flag = university != null;  
  17.     return Json(flag, JsonRequestBehavior.AllowGet);  
  18. }  
Debugging output
 
output
 
GitHub link.