html5 localStorage save input fields into form on keyup
mind map
HTML
<form id="mind-map-form">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>I really dont know what i am doing.</h3>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4" id="mind-input-a">
<h4>Moves</h4>
<input type="text" name="Moves" value="12">
</div>
</div>
<div class="row">
<div class="col-sm-4" id="mind-input-b">
<h4>Time</h4>
<input type="text" name="Time" value="25s">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4" id="mind-input-c">
<h4>Score</h4>
<input type="text" name="Score" value="12333333333333">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-2" id="mind-input-d">
<h4>Name</h4>
<input type="text" name="Name" value="Leo Conger">
</div>
<div class="col-sm-4" id="mind-input-e">
<h4>Number</h4>
<input type="text" name="Number" value="07935808534">
</div>
</div>
</form>
CSS
input {
width: 122px;
}
JavaScript
$("input").keyup(function () {
var closestID = $(this).closest('[id]').attr('id');
var mindMapArray = $("#" + closestID + " input").map(function () {
return {
"title": this.name,
"value": this.value
}
}).get();
//set that to localStorage
localStorage["id-" + closestID] = JSON.stringify(mindMapArray);
});
var getFromStore = function ($storredElements) {
$storredElements.each(function() {
var mindStore = localStorage["id-" + this.id];
if (mindStore) {
var mindMapArray = JSON.parse(mindStore);
for (var k in mindMapArray) {
var myTitle = mindMapArray[k]["title"];
var myVal = mindMapArray[k]["value"];
$("input[name='" + myTitle + "']", this).val( myVal );
}
}
});
}
getFromStore($('#mind-map-form > div > div'));