Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Introduction of HTML5 LocalStorage

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 284
    Comment on it

    HTML5 Local Storage Introduction:

    HTML5 Local Storage is a web and mobile based standard technology which allow a user to store and retrieve data in a person's local device.

    By using local storage, web based applications or programs can store data locally with in the user browser and retrieve data locally.

    'Local-Storage' is like as 'Session-Storage'. The basic difference is only that, 'Local-Storage' have not any expiration time, but 'Session-Storage' have this limitation. Session-Storage only save and retrieve data until the browser is open. In Session-Storage data remove after closing the browser.

    HTML5 StorageAttributes:

    Basically, both 'Local-Storage' and 'Session-Storage' uses same method for saving and getting data and for more functioning. The list of method give below.

    • setItem(key, value);

    • getItem(key)

    • removeItem(key)

    • clear()

    • key(index)

    • length

    Example of Using Local Storage to build dynamic Table through form mulitple Inputs

    Below I have provide a code packet to show you the brief example of "Local Storage" attribute. I have created a form and get the values from the inputs and created a "Dynamic Table" and save data in local storage. You can go through it and used it as per need.

    <!-- =HTML Content Start= --> <div class="pageContainer"> <div class="formContainer"> <form class="formRow" name="personalInfoForm" id="personalInfoForm"> <dl class="bio_dtl_form" id="bio_dtl_container"> <dt><label for="fName">Name</label></dt> <dd> <input type="text" value="" name="fName" placeholder="Your First Name" class="input-fields" /> </dd> <dt><label for="age">Age</label></dt> <dd> <input type="text" value="" name="age" placeholder="Your Age" class="input-fields" /> </dd> <dt><label for="qualification">Qualification</label></dt> <dd> <input type="text" value="" name="qualification" placeholder="Your Qualification" class="input-fields" /> </dd> <dt><label for="institutionName">Institution Name</label></dt> <dd> <input type="text" value="" name="institutionName" placeholder="Institution Name" class="input-fields" /> </dd> <dt><label for="experience">Years Of Experience</label></dt> <dd> <input type="text" value="" name="experience" placeholder="Your Experience" class="input-fields" /> </dd> </dl> <div class="btn-row"> <input type="button" value="Save Data" name="btnSave" class="btn-saveData" id="btn-saveData" /> <input type="button" value="Load Data" name="btnload" class="btn-loadData" /> </div> </form> </div> <!-- =Table Container Start= --> <div id="tableContainer" class="tableContainer"> <table class="formDataTbl" border="0" cellspacing="0" cellpadding="0" id="formDataTbl"> <thead> <tr> <th>First Name</th> <th>Age</th> <th>Qualification</th> <th>Institution Name</th> <th>Years Of Experience</th> </tr> </thead> <tbody id="tblContentBody"></tbody> </table> </div><!-- =Table Container End//= --> </div>

    <!-- =jQuery Script Files= --> <script src=""></script> <script type="text/javascript"> $(document).ready(function() { var formValueArr = { fName : "", age : "", qualification : "", institution : "", experience : "", }; var formValueStorage = { saveItems: function() { var lsCount = localStorage.length; var inputs = document.getElementsByClassName("input-fields"); formValueArr.fName = inputs[0].value; formValueArr.age = inputs[1].value; formValueArr.qualification = inputs[2].value; formValueArr.institution = inputs[3].value; formValueArr.experience = inputs[4].value; //Convert the object into JSON ans set it into LocalStorage localStorage.setItem("formValueArr_" + lsCount, JSON.stringify(formValueArr)); //Reload the Page location.reload(); }, //Load Data Items Function loadDataItems: function() { var datacount = localStorage.length; if (datacount & gt; 0) { for (i = 0; i & lt; datacount; i++) { var key = localStorage.key(i); var dataValue = localStorage.getItem(key); var dataValueList = JSON.parse(dataValue); var tblBodyContent = ""+ dataValueList.fName+""; tblBodyContent += ""+ dataValueList.age+""; tblBodyContent += ""+ dataValueList.qualification+""; tblBodyContent += ""+ dataValueList.institution+""; tblBodyContent += ""+ dataValueList.experience+""; tblBodyContent += ""; //Append Row and Cell Content $('#tblContentBody').append(tblBodyContent); } } //If Condition End// }, //Load Data Items Function End// }; //Save Button Event var btnSaveData = document.getElementById('btn-saveData'); btnSaveData.addEventListener('click', formValueStorage.saveItems, false); window.onload = function() { formValueStorage.loadDataItems(); }; }); //Document REady Function End// </script>

    <style type="text/css"> body{ margin:0; padding:0; font:14px Tahoma, Geneva, sans-serif; background:#efefef; } .pageContainer { width:75%; height:700px; margin:0 auto; box-shadow:0 2px 3px #b3b3b3; } .formContainer .bio_dtl_form { margin:0; padding:10px 20px; } .formContainer .bio_dtl_form dt { width:25%; display:inline-block; margin:10px 0; } .formContainer .bio_dtl_form dd { width:70%; display:inline-block; vertical-align:top; } .formContainer .bio_dtl_form dd input[type='text'] { width:100%; max-width:300px; display:block; padding:10px 5px; margin:10px 0; } .btn-row { margin-top:20px; margin-left:24%; } .tableContainer .formDataTbl { width:100%; margin:20px 0; border :1px solid #d9d9d9; } .tableContainer .formDataTbl th { background-color: #111; color:#fff; } .tableContainer .formDataTbl th, .tableContainer .formDataTbl td { padding:5px 10px; border:1px solid #d7d7d7; } </style>

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: