将数组的值存储到Chrome本地存储&取回它们

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

本文关键字：存储 amp 数组 Chrome      更新时间：2023-09-26

我正在尝试将输入表单的值保存到本地存储中，当我检查本地存储器时，我使用的密钥和[]一起在其中，作为其唯一值

这是否意味着它以数组的形式进入？它只是不填充数组？

正如我所读到的，我正在使用stringify to setItem and parse to getItem

如何将数组中的值添加到本地存储中的键中，然后检索它们？我写了一个解决方案，它不会产生错误，但除了keyWords []之外，它什么都不输入此外，我无法用我当前的程序检索任何东西，但我尝试使用

loadKeyWords();

这是我的代码，

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

这是我的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" 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>

几件事：

对于您的代码：

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

应该是：

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

键未定义。

我也不确定你的html是什么样子的，因为它没有给我们。你确定你是在为Description传递一个值，并且在添加函数时实际调用了这个函数吗？我会在元素add上的点击事件上放一个控制台日志，以确保函数被调用，我还会控制台日志变量Description的值。

也有可能，任何id为"add"的元素都是一个提交按钮，这意味着它将触发刷新事件，因此您必须使用$('#add').click( function(e) { e.preventDefault();

这是我测试的html，这些项目确实出现在localStorage中。检查您的开发人员工具和资源，以确保它留在本地存储：

  <div id="keywords">
   <form id="form">
    <input id="description" type="text" name="firstname">
    <button id="add">Submit</button>
   </form>
  </div>

localArray = [];
// 1. For consistency sake, you should call setArrayInLocalStorage to store the array
// 2. Just so that you know, everytime your app starts, you store an empty array into it
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() {
    // 3. I suggest you create local variable and store $('#keyWords') in it and use that variable in this function, more efficient that way
    $('#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() {
    // 4. Try to stick with convent and define variable using camel case
    var Description = $('#description').val();
    // 5. You already have the string/empty string in Description, you can simply use it here to compare with ''
    if ($("#description").val() === '') {
        $('#alert').html("<strong>Warning!</strong> Enter some words you hate!");
        $('#alert').fadeIn().delay(1000).fadeOut();
        return false;
    }
    // 6. Not sure why you take the time to build the list in html, yet to rebuild it in the function call below
    $('#keyWords').prepend("<li><input id='check' name='check' type='checkbox'/>" + Description + "</li>");
    // 7. Because we don't have your html code, not sure what this does and why you'll need it
    $('#form')[0].reset();
    localArray.push(Description);
    setArrayInLocalStorage('keyWords', localArray);
    loadKeyWords();
    return false;
});
$('#clear').click(function() {
    // 8. You might want to consider removing the keyWords instead of clearing your local storage here
    window.localStorage.clear();
    location.reload();
    return false;
});
loadKeyWords();

除了我的八条评论之外，我不明白为什么你应该将关键字存储在本地存储中并检索。如果你喜欢，请添加你的html代码，我们可以提供进一步的帮助。

相关文章：