Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
HTML 5

Web Storage In HTML5

Abstract

Html 5 offers us with Web Storage features. Developer can make their application as per the requirements. The term Web Storage defines the set of browser capability to allow application level persistent storage of key/value pairs on the client side. In this article we will be focusing on HTML5 Web Storage API: Session Storage and Local Storage attributes and will create a small MVC app by the help of Session Storage.

Introduction

Web Storage is the process of storing the structured data in the client Web browser with the help of JavaScript. The storage mechanism is implemented via key/value. It is exposed to us via two global objects called localStorage and sessionStorage. We can use these objects to what data to be stored, updated or deleted when needed. Web storage works extensively with client side scripting language where data can be transferred to the server on requirement and server can’t alter the data to the web storage.

Local Storage

Local storage is useful when you want to save the data to be accessible across multiple browser windows and keep the data long for persistent days even after the browser is closed and reopened.

Example 1: Usage of Local Storage

Code Snippet

  1. $('#btnLocalStorage').click(function()  
  2. {  
  3.     var txtName = $("#txtName").val();  
  4.     //set item  
  5.     localStorage.setItem("EmpName", txtName);  
  6. });  
  7.   
  8. $('#btnLocalStorageRemove').click(function()  
  9.  {  
  10.     //remove item  
  11.     localStorage.removeItem("EmpName");  
  12. });  
  13. $('#btnLocalStorageClear').click(function()   
  14.  {  
  15.     //clear Local Storage  
  16.     localStorage.clear();  
  17. });  
  18. $('#btnLocalStorageLength').click(function()   
  19.  {  
  20.     var localStoragelength = localStorage.length;  
  21.     alert("The length of Local storage is " + localStoragelength);  
  22.   
  23. });  
insert

Demonstrating we insert the item by defining key and data.

storage

Demonstrating the local storage set item, with stored data.

Your keys and values must be string. We have to rely upon toString() and JSON.stringify(converting JavaScript value to a JSON string), JSON.parse (to convert JSON text into JavaScript object).

Let’s take a small demo of storing the values in the Local Storage using Visual Studio. Here I will simply store the data to the local storage. As discussed earlier the data is saved in the local storage with a Key and its respective value. Let’s get started:

//Code snippet
  1. <html>  
  2.   
  3. <head>  
  4.     <meta name="viewport" content="width=device-width" />  
  5.     <title>Index</title>  
  6.     <script src="~/Scripts/jquery-1.10.2.js">  
  7.         </script>  
  8.         <script>  
  9.             $(document).ready(function()   
  10.              {  
  11.   
  12.   
  13.                 $('#btnSave').click(function()   
  14.                  {  
  15.   
  16.                     //emptying the UserInfo table at the start  
  17.                     $('#UserInfo').empty();  
  18.                     //debugging the btnsave click funtion  
  19.                     debugger;  
  20.                     //declaring a new object of type User which will contains User Information  
  21.                     var User = new Object();  
  22.   
  23.                     //allocating values to the property like userName,age,address  
  24.                     User.userName = $('#txtName').val();  
  25.                     User.age = $('#txtAge').val();  
  26.                     User.address = $('#txtAddress').val();  
  27.   
  28.                     //below lines check for if in local storage the key exist or not with name Users  
  29.                     if (localStorage.Users)   
  30.                     {  
  31.                         //if exist in local storage get all the previous details in the Users  
  32.                         //convert json string to javascript object  
  33.                         Users = JSON.parse(localStorage.getItem("Users"))  
  34.   
  35.                     } else   
  36.                     {  
  37.                         //create array of objects  
  38.                         Users = [];  
  39.                     }  
  40.                     //storing new value to the User Key  
  41.                     Users.push(User);  
  42.   
  43.                     //converts javascript value to a JSON String  
  44.                     localStorage.setItem('Users', JSON.stringify(Users));  
  45.   
  46.   
  47.                     var collectionofUser = JSON.parse(localStorage.getItem('Users'));  
  48.                     //translate all items in an array or object to new array of items  
  49.   
  50.                     $('#UserInfo').show();  
  51.                     var header = "<tr><th>User Name</th><th>Age</th><th>Address</th></tr>";  
  52.                     $('#UserInfo').append(header);  
  53.                     $.map(collectionofUser, function(UserDetails)  
  54.                     {  
  55.                         debugger;  
  56.   
  57.                         var Userinfo = "<tr><td>" + UserDetails.userName + "</td><td>" + UserDetails.age + "</td><td>" +  
  58.                             UserDetails.address + "</td></tr>";  
  59.   
  60.                         $('#UserInfo').append(Userinfo);  
  61.                     });  
  62.   
  63.                 })  
  64.             });  
  65.         </script>  
  66.   
  67. </head>  
  68.   
  69. <body>  
  70.     <div>  
  71.         <p>Welcome User to the Demo of Web Storage  
  72.             <br/> Enter the below form to see the magic.</p>  
  73.   
  74.         <table id="tblForm">  
  75.             <tr>  
  76.   
  77.                 <th>Name</th>  
  78.                 <th>Age</th>  
  79.                 <th>Address</th>  
  80.   
  81.             </tr>  
  82.             <tr>  
  83.   
  84.                 <td>  
  85.                     <input id="txtName" type="text" />  
  86.                 </td>  
  87.                 <td>  
  88.                     <input id="txtAge" type="text" />  
  89.                 </td>  
  90.                 <td>  
  91.                     <input id="txtAddress" type="text" />  
  92.                 </td>  
  93.             </tr>  
  94.             <tr>  
  95.   
  96.                 <td>  
  97.                     <input id="btnSave" type="button" value="Save" />  
  98.                 </td>  
  99.             </tr>  
  100.             </table>  
  101.   
  102.             <table id="UserInfo">  
  103.   
  104.   
  105.                 </table>  
  106.   
  107.     </div>  
  108. </body>  
  109.   
  110. </html>  
Simple UI
Simple UI
                           Demonstrating the Simple UI screen.

Let’s start debugging our application.

Phase 1

storage
Demonstrating the debug point and local storage.

Phase 2

storage
Demonstrating: As there is no key with name user a new array is created and user information is pushed to UserArray.

Phase 3

Storage
Demonstrating the local storage has been set with key named users and all the object properties has been set to the Key as shown above at right hand side.

Phase 4
records
Demonstrating all the records present in key users is being stored in collection of user in the form of JavaScript objects as shown above.

Phase 5
object
Demonstrating moving object one by one and displayed to the table

Phase 6

function
Demonstrating User Interface after function execution.

Benefits of Local Storage
  • Saving program state, or saving some information that is needed across the entire web application.
  • Local storage gives limit of 5MB of data to be stored on client side.
  • It stores data with no expiration date, and gets cleared only using JavaScript, or clearing the Browser Cache / Locally Stored Data.
Session Storage:

Everything you saw above in localStorage object also applies to the sessionStorage as well. The way you additem, removeitem is same as in LocalStorage, the only difference is the syntax name. The major difference between session storage and local storage is data persistence. Which means when we use localStorage data is present and available across various sessions (across multiple window) i.e. you can close your browser and come later and any data that has been stored in localStorage will be available to you. While in Session Storage the data is used only on one browser window which means as soon as we close our window our session keys are destroyed and will not be accessible across sessions. It allows separate instance of application run in different windows without affecting each other. The values of session storage remains persistent after page load also.

Example 2: Usage of Session Storage

Code Snippet
  1. $('#btnSessionStorage').click(function()  
  2.  {  
  3.     debugger;  
  4.     var txtName = $("#txtName").val();  
  5.     //set item  
  6.     sessionStorage.setItem("EmpName", txtName);  
  7.   
  8. });  
  9.   
  10. $('#btnSessionStorageRemove').click(function()  
  11.  {  
  12.     debugger;  
  13.   
  14.     //remove item  
  15.     sessionStorage.removeItem("EmpName");  
  16. });  
  17. $('#btnSessionStorageClear').click(function()  
  18.  {  
  19.     debugger;  
  20.   
  21.     //clear Local Storage  
  22.     sessionStorage.clear();  
  23.   
  24. });  

session

Demonstrating the session storage length attribute.

We will be creating a simple Meeting application using Local storage as we go ahead, before that lets discuss the most mind oscillating topic called Security.

With the origin of Cookies as the HTTP state management website stores cookies as to relate HTTP requests to each other. With the help of cookies the simple HTTP stateless protocol becomes stateful.

Benefits of Web Storage
  • Based on the Html UI survey we can see that the Web storage is utilized frequently to locally stored code fragments probably for catching and fast responsiveness.
  • Easy to use API, with simple get and set key/value pairs.
  • Huge amount of data storage space.
Storage

Drawback of Web Storage
  • Data is stored without any encryption on disk. i.e. anyone who has access to the system can get access to the data.
  • In localStorage if until the website delete the data or user explicitly clear the data by telling the browser i.e. the data will be persistent for lifetime.
Security Concerns

As all the local storage is saved in client side, it can be tempered or can be seen by anyone who has sound knowledge of browser working and web. Just type localStorage in console window or go to resource and there they are.

Local storage is a threat when a browser is being shared by the multiple users example like cyber cafe, where any person can inject malicious script that can steal the user assets.

Let’s start and create a normal meeting scheduling app in Visual studio using ASP.NET MVC and session storage.

Create Simple Model classes as shown below:
  1. //Code Snippet
    //Business Layer
    //This class is the Master Class where all the data is to be inserted, we will be using entity framework for inserting data to the database.
    public class MeetingMaster  
  2. {  
  3.     [Key]  
  4.     public int ID  
  5.     {  
  6.         get;  
  7.         set;  
  8.     }  
  9.     public string Name   
  10.     {  
  11.         get;  
  12.         set;  
  13.     }  
  14.   
  15.     public string Date_Of_Meeting   
  16.     {  
  17.         get;  
  18.         set;  
  19.     }  
  20.   
  21.     public string Agenda_Covered  
  22.     {  
  23.         get;  
  24.         set;  
  25.     }  
  26.   
  27.     public string Start_Time  
  28.     {  
  29.         get;  
  30.         set;  
  31.     }  
  32.   
  33.     public string End_Time  
  34.     {  
  35.         get;  
  36.         set;  
  37.     }  
  38. }  
  39.   
  40.   
  41.   
  42.   
  43. //Agenda that is covered in the Meeting  
  44. public class Agenda  
  45. {  
  46.     private int _AgendaId;  
  47.     public string AgendaName  
  48.     {  
  49.         get;  
  50.         set;  
  51.     }  
  52. }  
  53.   
  54.   
  55.   
  56. //Date of Meeting  
  57. public classDate {  
  58.     public string StartTime   
  59.     {  
  60.         get;  
  61.         set;  
  62.     }  
  63.     public string EndTime   
  64.     {  
  65.         get;  
  66.         set;  
  67.     }  
  68.   
  69.     public string DateOfMeeting   
  70.     {  
  71.         get;  
  72.         set;  
  73.     }  
  74.   
  75.   
  76. }  
  77.   
  78. //Employee Details  
  79.   
  80. public class Employee   
  81. {  
  82.     private int _Id;  
  83.     public string participantName   
  84.     {  
  85.         get;  
  86.         set;  
  87.     }  
  88.   
  89.     public string participantEmail   
  90.     {  
  91.         get;  
  92.         set;  
  93.     }  
  94.   
  95. }  
  96.   
  97.   
  98. //Meetings Details  
  99. public class Meeting   
  100. {  
  101.     private int _MtngId;  
  102.     public string MtngName   
  103.     {  
  104.         get;  
  105.         set;  
  106.     }  
  107.   
  108. }  
  109.   
  110.   
  111.   
  112. //Participants who participated in the Meeting  
  113. public class Participants  
  114. {  
  115.     [Key]  
  116.     [DatabaseGenerated(DatabaseGeneratedOption.None)]  
  117.     public int MomId   
  118.     {  
  119.         get;  
  120.         set;  
  121.     }  
  122.     public string Name   
  123.     {  
  124.         get;  
  125.         set;  
  126.     }  
  127.   
  128.     public string Email   
  129.     {  
  130.         get;  
  131.         set;  
  132.     }  
  133.   
  134. }  
Let’s create our View, just a gentle reminder I will be using session storage for storage of data on the client browser and when all the information is gathered same will be inserted into the db.

UI
  1. @ {  
  2.     Layout = null;  
  3. }  
  4.   
  5. < !DOCTYPEhtml >  
  6.   
  7.     < html >  
  8.     < head >  
  9.     < meta name = "viewport"  
  10. content = "width=device-width" / >  
  11.     < title > Index < /title> < style >  
  12.   
  13.   
  14.     .ui - datepicker - current - day.ui - state - active {  
  15.         background: #0094ff; }  
  16. div.ui-datepicker  
  17. {  
  18. font-size: 12px;  
  19.   
  20.   
  21. color: # f00;  
  22.   
  23.     } < /style> < scriptsrc = "~/Scripts/jquery-1.10.2.js" > < /script> < scriptsrc = "~/Scripts/jquery.dateFormat-1.0.js" > < /script> < scriptsrc = "~/Scripts/jquery-ui-1.11.4.js" > < /script> < linkhref = "~/Content/jquery-ui-1.10.4.custom.css"  
  24. rel = "stylesheet" / >  
  25.     < script >  
  26.   
  27.     $(function()  
  28.       {  
  29.   
  30.         $(".date-picker").datepicker({  
  31.             dateFormat: 'dd-mm-yy'  
  32.         });  
  33.   
  34.     });  
  35.   
  36. $(document).ready(function()   
  37.   {  
  38.   
  39.   
  40.     $("#showMessage").dialog({  
  41.         modal: true,  
  42.         closeOnEscape: false,  
  43.         open: function(event, ui)  
  44.       {  
  45.             $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();  
  46.         },  
  47.         buttons: {  
  48.             Ok: function()  
  49.           {  
  50.   
  51.                 $(this).dialog("close");  
  52.             }  
  53.         }  
  54.     });  
  55.   
  56.   
  57.     $('#btnAdd').click(function()  
  58.       {  
  59.         $('#UserInfo').empty();  
  60.         //creating a session storage to add the participants in the   
  61.         //session storage and when user click on create meeting all   
  62.         //keys will retireved and send to the server  
  63.   
  64.         var participant = new Object();  
  65.         //encode to a base-64 encoded string:  
  66.         participant.participantName = btoa($('#txtName').val());  
  67.         participant.participantEmail = btoa($('#txtEmail').val());  
  68.   
  69.         if (sessionStorage.Participants)  
  70.         {  
  71.             //if exist in local storage get all the previous details in the Users  
  72.             //convert json string to javascript object  
  73.             Participants = JSON.parse(sessionStorage.getItem('Participants'));  
  74.   
  75.         } else   
  76.         {  
  77.             //Create an array   
  78.             Participants = [];  
  79.         }  
  80.   
  81.         Participants.push(participant);  
  82.         sessionStorage.setItem('Participants', JSON.stringify(Participants));  
  83.   
  84.         var ListToShow = JSON.parse(sessionStorage.getItem("Participants"));  
  85.         //show the table  
  86.         $('#UserInfo').show();  
  87.         var header = "<tr><th style='text-align:left'>User Name</th><th colspan='2' style='text-align:left'>Email</th></tr>";  
  88.         $('#UserInfo').append(header);  
  89.         $.map(ListToShow, function(UserDetails)  
  90.          {  
  91.   
  92.   
  93.             var Userinfo = "<tr><td >" + atob(UserDetails.participantName) + "</td><td colspan='2'>" + atob(UserDetails.participantEmail) + "</td></tr>";  
  94.   
  95.             //append the data to the table  
  96.             $('#UserInfo').append(Userinfo);  
  97.         });  
  98.         $('#txtName').val("")  
  99.         $('#txtEmail').val("")  
  100.   
  101.     });  
  102.   
  103.     $('#BtnSubmit').click(function()  
  104.      {  
  105.   
  106.         //here we will use session storage because the application need is to store records in session and destroy them once done and destroy if this is closed.  
  107.   
  108.         var mtngDate1 = new Object();  
  109.         mtngDate1.StartTime = $('#txtStartTime').val();  
  110.         mtngDate1.EndTime = $('#txtEndTime').val();  
  111.         mtngDate1.DateOfMeeting = $('#Date_Of_Meeting').val();  
  112.   
  113.         //creating agenda object to be passed to the controller  
  114.         var agenda = new Object();  
  115.         agenda.AgendaName = $('#txtMtngAgenda').val();  
  116.   
  117.         //creating mtngName object to be passed to the controller  
  118.         var mtng = new Object();  
  119.         mtng.MtngName = $('#txtMtngNAME').val();  
  120.   
  121.         var participantsDetails = JSON.parse(sessionStorage.getItem('Participants'));  
  122.         participantsDetailas = JSON.stringify({  
  123.             'participantsDetails': participantsDetails,  
  124.             'mtngDate': mtngDate1,  
  125.             'agendaCovered': agenda,  
  126.             'mtngNameCovered': mtng  
  127.         });  
  128.         $.ajax({  
  129.             type: 'POST',  
  130.             traditional: true,  
  131.             dataType: "json",  
  132.             url: '/Test/CreateMtng',  
  133.             contentType: "application/json; charset=utf-8",  
  134.             data: participantsDetailas,  
  135.             success: function(data)  
  136.           {  
  137.   
  138.                 alert(data);  
  139.                 sessionStorage.clear();  
  140.                 $('#txtMtngNAME').val("");  
  141.                 $('#txtMtngAgenda').val("");  
  142.                 $('#Date_Of_Meeting').val("");  
  143.                 $('#txtStartTime').val("");  
  144.                 $('#txtEndTime').val("");  
  145.                 $('#UserInfo').empty();  
  146.             },  
  147.             error: function()  
  148.           {  
  149.                 alert('failure');  
  150.             }  
  151.         })  
  152.   
  153.     });  
  154. }); < /script>  
  155.   
  156. < /head> < body >  
  157.     < div >  
  158.     < tablealign = "center"  
  159. frame = "box" >  
  160.     < tr >  
  161.   
  162.     < thcolspan = "3" > Meeting Scheduler < /th> < /tr> < tr >  
  163.     < thstyle = "text-align:left" > Meeting Name < /th> < td > < inputid = "txtMtngNAME"  
  164. name = "Meeting.MtngName"  
  165. type = "text" / > < /td> < /tr> < tr >  
  166.   
  167.     < thstyle = "text-align:left" > Agenda Covered < /th> < td > < inputid = "txtMtngAgenda"  
  168. name = "Agenda.AgendaName"  
  169. type = "text" / > < /td> < /tr> < tr >  
  170.     < thstyle = "text-align:left" > Date of Meeting < /th> < td >  
  171.     @Html.TextBox("Date Of Meeting", "---- Target Date----", new {  
  172.         placeholder = "Enter Date", style = " text-align:left", autocomplete = "off", @class = "date-picker", name = "Date.DateOfMeeting"  
  173.     }) < /td>  
  174.   
  175.   
  176. < /tr> < tr >  
  177.     < thcolspan = "2"  
  178. style = "text-align:left" > Participants Details < /th> < /tr> < tr >  
  179.     < td > < inputid = "txtName"  
  180. type = "text"  
  181. placeholder = "Enter CustomerName" / > < /td> < td > < inputid = "txtEmail"  
  182. type = "text"  
  183. placeholder = "Enter Email id" / > < /td> < td > < inputid = "btnAdd"  
  184. type = "button"  
  185. value = "Add Participants" / > < /td>  
  186.   
  187.   
  188. < /tr> < tr >  
  189.     < tdstyle = "text-align:left" >  
  190.   
  191.     Participants  
  192.   
  193.     < /td> < /tr> < tr >  
  194.     < tdcolspan = "3" >  
  195.     < tableid = "UserInfo"  
  196. style = "width:100%;"  
  197. align = "center"  
  198. frame = "box" >  
  199.   
  200.   
  201.   
  202.     < /table>  
  203.   
  204.   
  205. < /td>  
  206.   
  207. < /tr> < tr >  
  208.     < thstyle = "text-align:left" > Start time < /th> < td > < inputid = "txtStartTime"  
  209. type = "text"  
  210. name = "Date.StartTime" / > < /td>  
  211.   
  212. < /tr> < tr >  
  213.     < thstyle = "text-align:left" > EndTime time < /th> < td > < inputid = "txtEndTime"  
  214. type = "text"  
  215. name = "Date.EndTime" / > < /td>  
  216.   
  217. < /tr> < tr >  
  218.     < tdcolspan = "3"  
  219. style = "text-align:center" > < inputid = "BtnSubmit"  
  220. type = "button"  
  221. value = "Create Meeting" / > < /td> < /tr> < /table> < /div> < /body> < /html>  
  222.   
  223.   
  224. //Controller  
  225. Create a Controller  
  226.   
  227. public class TestController: Controller  
  228. {  
  229.     // GET: Test  
  230.     public ActionResult Index()  
  231.     {  
  232.         return View();  
  233.     }  
  234.   
  235.     //Create Meeting called by ajax  
  236.     public ActionResult CreateMtng(MeetingVM objVm)  
  237.     {  
  238.   
  239.         //Data access layer object  
  240.         DAL objDal = newDAL();  
  241.   
  242.         //meeting master object created   
  243.         MeetingMaster mtngMasterDetails = newMeetingMaster();  
  244.   
  245.         mtngMasterDetails.Name = objVm.mtngNameCovered.MtngName.ToString();  
  246.         mtngMasterDetails.Agenda_Covered = objVm.agendaCovered.AgendaName.ToString().Trim();  
  247.         mtngMasterDetails.Date_Of_Meeting = objVm.mtngDate.DateOfMeeting.ToString().Trim();  
  248.         mtngMasterDetails.End_Time = objVm.mtngDate.EndTime.ToString().Trim();  
  249.         mtngMasterDetails.Start_Time = objVm.mtngDate.StartTime.ToString().Trim();  
  250.   
  251.   
  252.         //added to the in memory  
  253.         objDal.mtngMaster.Add(mtngMasterDetails);  
  254.   
  255.         //saved to db  
  256.         objDal.SaveChanges();  
  257.   
  258.         int MtngId = mtngMasterDetails.ID;  
  259.   
  260.   
  261.         //logic for adding participants of the Meeting to the Participants table  
  262.         Participants participant = newParticipants();  
  263.         foreach(Employee obj in objVm.participantsDetails)  
  264.         {  
  265.   
  266.             participant.MomId = MtngId;  
  267.   
  268.             byte[] dataEmail = Convert.FromBase64String(obj.participantEmail);  
  269.             byte[] dataName = Convert.FromBase64String(obj.participantName);  
  270.             string decodedEmail = Encoding.UTF8.GetString(dataEmail);  
  271.             string decodedName = Encoding.UTF8.GetString(dataName);  
  272.             participant.Email = decodedEmail;  
  273.             participant.Name = obj.participantName;  
  274.   
  275.             objDal.participants.Add(participant);  
  276.             objDal.SaveChanges();  
  277.         }  
  278.   
  279.   
  280.         string response = "The Meeting Successfully createed with id " + MtngId;  
  281.         return Json(response, JsonRequestBehavior.AllowGet);  
  282.   
  283.     }  
  284. }  
Table for Meeting Master

ID here is an Identity column where in TblParticipants MomId is not Identity.

Meeting
Table for Participants,

Participants


//DAL
We will be using Entity Framework for mapping our Models to the DB schema.
  1. public classDAL: DbContext  
  2. {  
  3.     //DBSet class represents an entity set that is used for create, read, update, and delete operations.  
  4.     public DbSet < MeetingMaster > mtngMaster  
  5.     {  
  6.         get;  
  7.         set;  
  8.     }  
  9.     publicDbSet < Participants > participants   
  10.     {  
  11.         get;  
  12.         set;  
  13.     }  
  14.     protected override void OnModelCreating(DbModelBuilder modelBuilder)  
  15.     {  
  16.         //map your classes to tables   
  17.         modelBuilder.Entity < MeetingMaster > ().ToTable("TblMeetingMaster");  
  18.         modelBuilder.Entity < Participants > ().ToTable("TblParticipants");  
  19.     }  
  20. }  
Let’s start and debug our program step by step,

debug

Secretary creates a list of Participants to be added and click on Add participants. Here the list of participants will be stored in session storage rather than storing it session on server side. We will encoding the value using base-64 encoded to keep the value secret. These values can be manipulated easily injecting malicious JavaScript while if the user directly changes the value it will fail to decode as it will not be 64 bit encoded. We will test the same scenario during the debugging.

Debugger Stages

Stage 1:

Debugger

We can see the textbox values being encoded in 64 bit.

'sessionStorage.Participants' checks for if there is already any Participants key present in sessionStorage if not than create array of Participants and push the Participant object into the array and then save the same in sessionStorage.

Debugger

Value stored in session Storage with key Participants.

Participants
As new key has been inserted in session storage, now if we check 'sessionStorage.Participants' we will receive the above output. If I try to inject the JavaScript over here and delete the key and insert a new key it can be easily done. Let’s see what happens,

key

I cleared session storage and tried to change the value and added encoded 64 of ‘hacker’ this may seems foolish as I am changing the value from the console window. Let’s check what value appears on the browser for participants.

console
As we can see the value has been manipulated, same can happen when someone inject malicious script and change the data, so it’s strictly said not to store important credentials and users important information in localStorage or sessionStorage as it’s vulnerable to attacks easily.

Let’s focus and create a Meeting app using ASP.NET MVC.

app

Secretary has inserted the details and creates the meeting.

Meeting

We create object of all the details to be passed to the Controller, as we know before passing the objects we need to Stringfy the objects as shown below,

objects

objects

Hits comes to the Controllers,

Controllers

All the values passed from the View to the Controller, and participants values are encoded in 64 bit.

values

Decoding of Participants name and email.

Decoding
Meeting has been successfully created with id 1.

created

Successful creation of meeting.

Let’s check the database values,

database

You can add mailing features also, so that all the participants will receive the mail regarding minutes of the Meeting.

Hence I conclude that Web Storage is a really amazing concept with drawbacks as well. I was unaware of Web Storage features before this so I wanted to unleash this topic from scratch. I hope this article will be helpful to everyone. I would be happy and will feel appreciated if you could comment and improvise me in doing better and learning the security measures to be taken while using sessionStorage or LocalStorage.

Up Next
    Ebook Download
    View all
    Learn
    View all