将数组保存到 Chrome 本地存储

Question

我正在将一个数组保存到本地存储，然后将数组中的单词添加到我正在编写的 chrome 扩展程序中使用的 popup.html 页面上的ul。

问题是在我离开 popup.html 后，我保存到本地存储的关键字不再出现在表单中。

这让我相信我没有将它们保存到本地存储中。

我是否正确保存数组并正确调用存储在本地存储中的数组中的关键字？

  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

Answer 1

这是一个与您的问题无关的解决方案，它将数组显式保存到本地存储：

// 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"]

链接到JS Fiddle

函数示例

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');

Answer 2

替换

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

与：

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

然后在访问关键字时使用：

localStorage.keyWords

代替：

localStorage["keyWords"]

不能保证能解决所有问题，但应该能解决本地存储问题。