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:
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 <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
Post a Comment