LOAD and SAVE form values from local storage.
Test using localstorage to store form values
by moob
HTML
<form id="propform">
<input type="text" name="a" />
<input type="email" name="b" />
<input type="number" name="c" />
<select name="d">
<option value="1">option one</option>
<option value="2">option two</option>
<option value="3">option three</option>
</select>
<label><input type="radio" name="e" value="1" />1</label>
<label><input type="radio" name="e" value="2" />2</label>
<label><input type="radio" name="e" value="3" />3</label>
<input type="range" name="f" min=0 max="100" />
<label><input type="checkbox" name="g" value="a" />A</label>
<label><input type="checkbox" name="g" value="b" />B</label>
<label><input type="checkbox" name="g" value="c" />C</label>
<textarea name="h">I am a textarea</textarea>
<input type="color" name="i" />
<input type="date" name="j" />
<input type="file" name="k" />
<input type="time" name="l" />
<input type="search" name="m" />
<input type="month" name="n" />
<input type="week" name="o" />
<select multiple name="p">
<option value="1">option one</option>
<option value="2">option two</option>
<option value="3">option three</option>
<option value="4">option four</option>
</select>
<input type="submit" value="Save Form" />
</form>
CSS
input[type=submit]{
display:block;
margin-top:20px;
}
JavaScript
/*
LOAD and SAVE form values from local storage.
https://jsfiddle.net/moob/zn1mjgdk/
*/
var localstorage = {
ident : "",
setident : function(newIdent){
this.ident = newIdent;
},
enabled : true,
available : (window.localStorage),
serialized : "a=defaut&b=values&c=here",
set : function(newVal){
this.serialized = newVal;
window.localStorage.setItem(this.ident, newVal);
console.warn(this.serialized);
},
get : function(){
this.serialized = window.localStorage.getItem(this.ident);
},
populate : function(){
this.get();
console.warn(this.serialized);
//for each item in the serialised string
$.each(localstorage.serialized.split('&'), function (index, elem) {
var vals = elem.split('='),
$els = $("[name='" + vals[0] + "']"),
val = decodeURIComponent(vals[1].replace(/\+/g,' ')),
type = $els.first().attr("type");
if(!type){
type=$els.first().prop('nodeName').toLowerCase();
if($els.first().is("[multiple]")){type+="multiple";}
}
switch (type) {
case "radio":
case "checkbox":
$els.each(function(){
if($(this).val()==val){
$(this).prop("checked",true);
}
});
break;
case "selectmultiple":
$els.find("option").each(function(){
if($(this).val()==val){
$(this).prop("selected",true);
}
});
break;
default:
$els.val(val);
break;
}
});
},
disableUploads : function(){
$("input[type=file]").on("click",function(e){
e.preventDefault();
alert("File uploads are not supported in...