Local storage is utilized to save data locally within user’s browser. You can save a huge quantity of data locally and it is more secure. In many cases, we face some issues while handling data between the pages. If you want to handle the data from one page to another page we need to store data anywhere place like DB, file etc. It will increase server workload. To avoid this, we can use browser Local Storage to save our some required data so that whenever you reload pages then data will still be there.
Data will store with a key name. Using this key name we can easy to get stored value from Local Storage. It will help us instead of using cookies. Local Storage doesn’t have a termination of stored data. It stored locally with the help of local storage.
- Before using Local Storage in your application we need to check the browser capability.
|
1 2 3 4 5 |
if (typeof(Storage) !== "undefined") { // Data handling code for local storage. } else { // Sorry, your browser does not support Local Storage.. } |
- Create data set with key and value. Here we can store single data or array object data using Json method.
|
1 2 3 4 5 |
localStorage.data_key_name = 'data_key_value'; or localStorage.setItem('data_key_name ', 'data_key_value'); |
- Get the data from stored key set values with the help of data key name and getItem() method.
|
1 2 3 4 5 |
localStorage.data_key_name; or localStorage.getItem('data_key_name'); |
- Delete or remove particular data key value with the help of data key name and removeItem() method.
|
1 |
localStorage.removeItem("data_key_name"); |
- If you want to delete all stored key name values means clear() method is used for that.
|
1 |
localStorage.clear(); |
Step 1: HTML Form with Input fields
Following code, use to Add HTML input field form to set the data into local browser storage with a proper key name.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<div class="panel panel-default"> <div class="panel-heading">User Details:</div> <div class="panel-body"> <div class="alert icon-alert with-arrow alert-success form-alter" role="alert"> <i class="fa fa-fw fa-check-circle"></i> <strong> Success ! </strong> Data saved successfully. </div> <div class="alert icon-alert with-arrow alert-danger form-alter" role="alert"> <i class="fa fa-fw fa-times-circle"></i> <strong> Note !</strong>Data saving failed </div> <div class="row"> <div class="col-md-offset-1 col-md-8"> <div class="form-group"> <label for="country_name" class="required" >User Name:</label> <input type="text" class="form-control dup-check" id="user_name" name="user_name" required /> <span class="dup-chek-details"></span> </div> </div> </div> <div class="row"> <div class="col-md-offset-1 col-md-8"> <div class="form-group"> <label for="country_name" class="required" >User No.:</label> <input type="text" class="form-control dup-check" id="user_no" name="user_no" required /> <span class="dup-chek-details"></span> </div> </div> </div> <div class="row"> <div class="col-md-offset-1 col-md-8"> <div class="form-group"> <label for="country_name" class="required" >User Email:</label> <input type="email" class="form-control dup-check" id="user_email" name="user_email" required /> <span class="dup-chek-details"></span> </div> </div> </div> <div class="clearfix"></div><br/> <div class="form-action-group"> <button type="button" class="btn btn-primary btn-form-action btn-submit">Submit</button> <button type="button" class="btn btn-danger btn-form-action btn-reset">Clear</button> </div> </div> </div> |
and script to save the data to local storage
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).on('click', '.btn-submit', function(ev){ if(typeof(Storage) !== "undefined") { localStorage.user_name = $("#user_name").val(); localStorage.setItem('user_no', $("#user_no").val()); var dataObject = { 'name': localStorage.user_name, 'email': $("#user_email").val()}; localStorage.user_email = JSON.stringify(dataObject); } else { alert("Sorry, your browser does not support local storage..."); } }); |
Step 2: HTML design to display the stored data on page
Following code, use to Get the stored data from local storage with key name and show it in HTML table or required page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div class="panel panel-default"> <div class="panel-heading">Show User Details:</div> <div class="panel-body"> <div class="row"> <div class="col-md-offset-1 col-md-10"> <table class="cust-table"> <tr> <th>Name</th><th>:</th><td><span class="disp-name" id="disp_user_name"></span></td> </tr> <tr> <th>Number</th><th>:</th><td><span class="disp-name" id="disp_user_no"></span></td> </tr> <tr> <th>Email</th><th>:</th><td><span class="disp-name" id="disp_user_email"></span></td> </tr> </table> </div> </div> <div class="clearfix"></div><br/> <div class="form-action-group"> <button type="button" class="btn btn-primary btn-form-action btn-get-details">Get Detals</button> <button type="button" class="btn btn-danger btn-form-action btn-remove-details">Delete Detals</button> </div> </div> </div> |
and script to get and show the data from local storage
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(document).on('click', '.btn-get-details', function(ev){ if(typeof(Storage) !== "undefined") { if (localStorage.user_name) { $("#disp_user_name").html(localStorage.user_name); }else{ $("#disp_user_name").html('not set'); } if (localStorage.user_no) { $("#disp_user_no").html(localStorage.user_no); }else{ $("#disp_user_no").html('not set'); } if (localStorage.user_email) { $("#disp_user_email").html(localStorage.user_email); }else{ $("#disp_user_email").html('not set'); } } else { alert("Sorry, your browser does not support local storage..."); } }); |
Step 3: Delete stored details for local storage
Following code, use to Remove or delete the data values from local storage
|
1 2 3 4 5 6 7 8 |
$(document).on('click', '.btn-remove-details', function(ev){ if(typeof(Storage) !== "undefined") { localStorage.clear(); } else { alert("Sorry, your browser does not support local storage..."); } }); |
Download Demo
