Weave: https://codepen.io/anon/pen/BZVdaM?editors=0010
I'm using LocalStorage to remember the states of input[type=text] elements. I was able to push to a JSON fine
{"website": "value","behance": "value","dribbble": "value"}
However, my problem now is I'm having difficulty populating the saved data on back in the inputs for page load.
On first run the string returned shouldn't have the quote outside of it; in addition, I noticed after 2nd run it wouldn't show any of the saved data.
Here's the result from Chrome Dev Tools (this is after the 2nd run adding text to another textbox)
Thus what am I doing wrong?
var arr = localStorage.getItem("socialValues") || {};
if ( localStorage.getItem("socialValues")) {
var savedArrData = JSON.parse(arr);
$.each(savedArrData, function(key, value) {
$("[data-social=links] input#" + key).val(value);
});
}
$("[data-social=links] input").on("change keyup", function() {
var id = this.id;
arr[id] = (this.value ? '"' + this.value + '"' : "");
localStorage.removeItem("socialValues");
localStorage.setItem("socialValues", JSON.stringify(arr));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="uk-nav uk-nav-default" data-social="links">
<li>
<a href="#">
<span class="uk-margin-small-right" uk-icon="icon: world"></span>
<input id="website" class="socialbox" type="text" placeholder="http://yoursite.com/" value="hello world">
</a>
</li>
<li>
<a href="#">
<span class="uk-margin-small-right" uk-icon="icon: behance"></span>
<input id="behance" class="socialbox" type="text" placeholder="Your behance page">
</a>
</li>
<li>
<a href="#">
<span class="uk-margin-small-right" uk-icon="icon: dribbble"></span>
<input id="dribbble" class="socialbox" type="text" placeholder="Your dribbble page">
</a>
</li>
</ul>