将阵列的值存储到Chrome本地存储并检索它们

我试图将输入到表单中的值保存到本地存储当我检查本地存储时，我正在使用的密钥与其中的[]一起只有值将阵列的值存储到Chrome本地存储并检索它们

这是否意味着它作为一个数组输入？它只是不填充数组？

我读过，我使用stringify to setItem and parse to getItem

如何从数组中添加值在localStorage的键，然后检索这些？我已经写了产生任何错误的解决方案，但它不进入任何东西，但keyWords [] 此外，我不能用我的当前程序检索anyhting但我尝试用

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>

来源

2015-12-25 wuno

有几件事情：

为您的代码：

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

它应该是：

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

关键是没有定义。

我也不确定你的html的样子，因为它没有给我们。你确定你传递了一个描述的值，并且当你添加一个函数时这个函数实际上被调用了吗？我将一个控制台日志放在元素添加上的click事件中，以确保该函数被调用，并且还将控制台记录变量Description的值。

它也有可能是任何元素的ID为“增加”是一个提交按钮，这意味着它会触发一个刷新事件，所以你不得不使用 $('#add').click(function(e) { e.preventDefault();

这里的HTML我的睾丸，并且这些项目确实出现在localStorage中。检查你的开发工具和资源，以确保它保持在localStorage的：

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

来源

2015-12-25 04:42:47

我加了我的html。而关键是被添加到本地存储，它只是没有添加任何值我推动arrat – wuno

好吧跑在我的labtop上，价值被存储在本地存储。我的第一次修正似乎是，变量的错误标签似乎导致了问题。 –

同意迈克尔，我没有注意到。 – Will

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代码，我们可以进一步提供帮助。

来源

2015-12-25 04:33:11 Will

这是不行的，我现在的储蓄值到本地存储，使用户可以在浏览器与我的分机的运行做了跳跃审查的价值观网他们补充道。 – wuno

将阵列的值存储到Chrome本地存储并检索它们

回答

相关问题