CODEWITHSUNDEEP
javascriptarraysgoogle-chrome-extensionlocal-storage
wuno
wuno

Reputation: 9875

Saving Array to Chrome Local Storage

I am saving an array to local storage and then adding the words in the array to a ul on the popup.html page I am using in a chrome extension I am writing.

Problem is after I leave the popup.html the keywords that I save to local storage no longer appear in the form.

This leads me to believe I am not saving them to local storage.

Am I saving the array correctly and calling the keywords stored in the array inside local storage correctly?

  keyWordArray = [];
keyWords = $('#keyWords').html();
keyWordArray = localStorage.keyWords;

keyIn = localStorage.setItem("keyWords", JSON.stringify(keyWordArray));
keyOut= JSON.parse(keyWordArray);

Description = $('#description').val();

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

$(document).ready(function () {

  $('#add').click( function() {

    if($(Description) === '') {
      $('#alert').html("<strong>Warning!</strong> Enter some things you hate!");
      $('#alert').fadeIn().delay(1000).fadeOut();
      return false;
    }

    //add the new keyword to the array
    keyWordArray.push(Description);
    //overwrite the array in localStorage with the new, updated array
    keyIn();
    //call loadKeyWords() to rebuild the UL and hide any matching elements
    loadKeys();
    return false;
  });

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

window.addEventListener('DOMContentLoaded', function() {
    var page = chrome.extension.getBackgroundPage();
    // now you can access the background page objects / functions
      for(var i = 0; i < keyWordArray.length; i++) {
      //and hide any DOM elements that have the keyword
      $("div:contains('"+keyWordArray[i]+"')").hide();    
        }
    });

loadKeys();
}); //end of document ready function

Upvotes: 1

Views: 2150

Answers (2)

Ian Jamieson
Ian Jamieson

Reputation: 4816

Here is a solution that is out of context of your problem that explicitly saves an array to local storage:

// set up the array
var theArray = ['red', 'green', 'blue'],
    localStorageTheArray;

// convert the array to a string and write it to local storage 
localStorage.setItem('theArray', JSON.stringify(theArray));

// retrieve the string from local storage and convert it back to an array
localStorageTheArray = JSON.parse(localStorage.getItem('theArray'));

localStorageTheArray.push('purple');

console.log(localStorageTheArray);
// ["red", "green", "blue", "purple"]

Link to JS Fiddle

Example with functions

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

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

// to set
setArrayInLocalStorage('theArray', theArray);

// to get
getArrayInLocalStorage('theArray');

Upvotes: 2

Pabs123
Pabs123

Reputation: 3435

Replace

localStorage["keyWords"] = JSON.stringify(keyWordArray);

with:

localStorage.setItem("keyWords", JSON.stringify(keyWordArray));

And then when accessing the keywords use:

localStorage.keyWords

instead of:

localStorage["keyWords"]

Can't guarantee that will fix all of your problems but it should solve the local storage issue.

Upvotes: 0

Related Questions