javascript - jQuery setting & getting localstorage data for dropdowns & input's -


i'm trying make simple form page have localstorage functionality restore settings/input after page has been closed/reloaded.

i've attempted make start still learning there mistakes , can't work.

  • if change made name input field should update localstorage new name.
  • if change made of dropdown (selector? option?) fields should update localstorage new value.
  • on page load should automatically restore of values.
  • the "clear" button should only reset dropdown (selector? option?) fields blank, should not reset name field.

example: https://jsfiddle.net/5gam3b6f/

$(document).ready(function () {     $.each($("select"), function (index, value)) {         localstorage.getitem($(this).attr(“id”));     }; });  $("select").on("change", function () {     localstorage.setitem($(this).attr(“id”), $(this)); }); 

i haven't managed start on name input field or clear function yet because can't first 1 work.

i rather not use external libraries complicated get, nothing else needed.

the below work you:

here working jsfiddle

jquery

$('.uselocalselect').change(function () {     var key = $(this).attr('id');     var value = $(this).val();     localstorage.setitem(key, value) });  // use timer text fields , localsotrage set 2 seconds after user stops typing instead of after each keystroke var t = ''; $('.uselocalinput').keyup(function () {     cleartimeout(t);     var key = $(this).attr('id');     var value = $(this).val();     t = settimeout(function () {         localstorage.setitem(key, value)     }, 2000); });  $('.uselocal').each(function () {     var key = $(this).attr('id');     if (localstorage.getitem(key)) {         $(this).val(localstorage.getitem(key));     } });  $('.clearlocalselect').click(function () {     $('.uselocalselect').each(function () {         $(this).val('');         var key = $(this).attr('id');         localstorage.removeitem(key);     }); }); 

html

<label style="color: #01acee; font: bold 14px tahoma;">input &nbsp;&nbsp;&nbsp;     <input class="uselocal uselocalinput" id="testinput" size="40" type="text" name="website" value="" required/> </label> <br/> <br/> <label style="color: #01acee; font: bold 14px tahoma;">select</label> <select class="uselocal uselocalselect" id="testselect" name="start_date">     <option value="">select one...</option>     <option value="january">january</option>     <option value="february">february</option>     <option value="march">march</option>     <option value="april">april</option>     <option value="may">may</option>     <option value="june">june</option>     <option value="july">july</option>     <option value="august">august</option>     <option value="september">september</option>     <option value="october">october</option>     <option value="november">noember</option>     <option value="december">december</option> </select> <br/> <br/>     <input type="button" class="clearlocalselect" value="clear selects"/> 

Comments

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

[C++][SFML 2.2] Strange Performance Issues - Moving Mouse Lowers CPU Usage -

ios - Possible to get UIButton sizeThatFits to work? -