Clever Geek Handbook

LocalStorage TextBox to JSON

Weave: https://codepen.io/anon/pen/BZVdaM?editors=0010

I am using LocalStorage to remember the states of items . I was able to push to JSON fine input[type=text] 

{"website": "value","behance": "value","dribbble": "value"}

However, now my problem is that I am having a hard time filling in the stored data in the inputs to load the page.

On first run, the returned string must not contain a quote outside of it; Also, I noticed that after the second run, none of the saved data would be displayed.

Here is the output from Chrome Dev Tools (this is after 2nd run of adding text to another textbox)

enter image description here

So 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>
Run codeHide result


+3


source to share


5 answers


There were several problems in your code.

On first run, the returned string must not contain a quote outside of it

This is because you are storing strings with multiple quotes.

arr[id] = (this.value ? '"' + this.value + '"' : "");

Should be:

savedArrData[id] = (this.value ? this.value : "");

Also, I noticed that after the second run, none of the saved data would be displayed.

This is because you did not load the initial one correctly arr

.

var arr = localStorage.getItem("socialValues") || {};


If local storage is empty, you load the object into arr

. localStorage.getItem()

returns a string

, so under the next load arr

contains a string

. It causes:

arr[id] = (this.value ? '"' + this.value + '"' : "");

To stop working on the following loads.

So what you need to do is load the string into arr

, parse it into an object, savedArrData

and then only work with the object.

var obj = localStorage.getItem("socialValues") || "{}";
var savedArrData = JSON.parse(obj);

$.each(savedArrData, function (key, value) {
    $("[data-social=links] input#" + key).val(value);
});

$("[data-social=links] input").on("change keyup", function () {
    var id = this.id;
    savedArrData[id] = (this.value ? this.value : "");
    localStorage.removeItem("socialValues");
    localStorage.setItem("socialValues", JSON.stringify(savedArrData));
});

Here is a working demo with all the changes

BTW

arr

should actually be named obj

as its object, not an array.

0


source


When the page loads, iterate over the JSON properties that you retrieve from localStorage

and set the values ​​of the corresponding inputs:



$(document).ready(function() {
    var json = localStorage.getItem("socialValues") || "{}";
    var savedData = JSON.parse(json);
    $.each(savedData, function(key, value) {
        $("#" + key).val(value);
    });
})
0


source


You just need to change arr[id] = (this.value ? '"' + this.value + '"' : "");

to arr[id] = (this.value ? this.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));
});

Since you are converting your stored object to a string localStorage.setItem("socialValues", JSON.stringify(savedArrData));

, you do not need to convert when pasting to local storage.

0


source 


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>
Run codeHide result


0


source


A few observations:

  • Parse the JSON string that is stored in local storage when assigning it to a variable arr

    .

    var arr = JSON.parse(localStorage.getItem("socialValues")) || {};

Working demo

var arr = JSON.parse(localStorage.getItem("socialValues")) || {};

if (localStorage.getItem("socialValues")) {
  var savedArrData = JSON.parse(localStorage.getItem("socialValues"));
  $.each(savedArrData, function(key, value) {
    $("#" + 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" 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>
Run codeHide result


0


source






More articles:


All Articles