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. }
  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. }
  41. var actionHandler = function () {
  42. $('.get-response').unbind('click').on('click', function () {
  43. debugger;
  44. getResponse();
  45. });
  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. }
  59. var initialize = function () {
  60. actionHandler();
  61. }
  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. }
  14. public ActionResult GetResponseAjax(University university)
  15. {
  16. var flag = university != null;
  17. return Json(flag, JsonRequestBehavior.AllowGet);
  18. }
Debugging output
output
GitHub link.