Storing Values of An Array to Chrome Local Storage & Retrieving Them

Ad

I am trying to save values entered into a form to the local storage, When I check the local storage the key i am using is in it along with [] as its only value

Does that mean it is entering it as an array? It is just non populating the array?

As I have read I am using stringify to setItem and parse to getItem

How do I add values from the array to the key in localstorage and then retrieve them? I have wrote a solution out that generates no errors, but it does not enter anything but keyWords [] Also I can no retrieve anyhting with my current program but I try with the

loadKeyWords();

Here is my code,

localArray = [];
localStorage.setItem('keyWords', JSON.stringify(localArray));

function setArrayInLocalStorage(keyWords, localArray) {
    localStorage.setItem(key, JSON.stringify(localArray));
}

function getArrayInLocalStorage(keyWords) {
    return JSON.parse(localStorage.getItem(keyWords));
}

function loadKeyWords() { 
     $('#keyWords').html('');
     localArray = getArrayInLocalStorage('keyWords');
    //for all the items in the array...
    for(var i = 0; i < localArray.length; i++) {
      //add them to the UL
      $('#keyWords').append('<li><input id="check" name="check" type="checkbox">'+localArray[i]+'</li>'); 
        }
    }

$('#add').click( function() {
   var Description = $('#description').val();
  if($("#description").val() === '') {
    $('#alert').html("<strong>Warning!</strong> Enter some words you hate!");
    $('#alert').fadeIn().delay(1000).fadeOut();
    return false;
   }
    $('#keyWords').prepend("<li><input id='check' name='check' type='checkbox'/>" + Description + "</li>");
   $('#form')[0].reset();
   localArray.push(Description);
   setArrayInLocalStorage('keyWords', localArray);
   loadKeyWords(); 
   return false;
});

  $('#clear').click( function() {
    window.localStorage.clear();
    location.reload();
    return false;
  });

loadKeyWords(); 

Here is my HTML

<!doctype html>
<html>
  <head>
    <title>Wuno Zensorship</title>
    <script src="jquery-1.11.3.min.js"></script>
        <script src="popup.js"></script>
    <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="styles.css">
  </head>
  <body>
    <img src="icon48.png">

 <section>
<form id="form" action="#" method="POST">
<input id="description" name="description" type="text" />
<input id="add" type="submit" value="Add" />
<button id="clear">Clear All</button>
</form>
<div id="alert"></div>
<ul id="keyWords"></ul>
</body>
</html>
Ad

Answer

Ad

A few things:

for your code:

function setArrayInLocalStorage(keyWords, localArray) {
localStorage.setItem(key, JSON.stringify(localArray));
}

It should be:

function setArrayInLocalStorage(keyWords, localArray) {
localStorage.setItem(keyWords, JSON.stringify(localArray));
}

key is not defined.

I'm also unsure of what your html looks like, since its not given to us. Are you sure that you are passing in a value for Description and that the function is actually called when you add a function? I'd put a console log on the click event on element add to ensure that the function is called and I'd also console log the value of the variable Description.

Its also possible that whatever element has the id "add" is a submit button, which means that it will trigger a refresh event, so you'd have to use $('#add').click( function(e) { e.preventDefault();

Here's the html I testes, and the items do appear in localStorage. Check your developer tools and resource to make sure that it stays in localStorage:

  <div id="keywords">
   <form id="form">
    <input id="description" type="text" name="firstname">
    <button id="add">Submit</button>
   </form>
  </div>
Ad
source: stackoverflow.com
Ad