将数组的值存储到 Chrome 本地存储并检索它们
Storing Values of An Array to Chrome Local Storage & Retrieving Them
我正在尝试将输入到表单中的值保存到本地存储,
当我检查本地存储时,我正在使用的密钥与 []
一起作为其唯一值
这是不是说它是以数组的形式输入的?它只是不填充数组?
据我所知,我正在使用 stringify to setItem and parse to getItem
如何将数组中的值添加到 localstorage 中的键,然后检索它们?我已经写了一个没有错误的解决方案,但它除了 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>
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 代码,我们可以提供进一步帮助。
几件事:
您的代码:
function setArrayInLocalStorage(keyWords, localArray) {
localStorage.setItem(key, JSON.stringify(localArray));
}
应该是:
function setArrayInLocalStorage(keyWords, localArray) {
localStorage.setItem(keyWords, JSON.stringify(localArray));
}
密钥未定义。
我也不确定您的 html 长什么样,因为它没有提供给我们。您确定要为 Description 传递一个值,并且在添加函数时实际调用该函数吗?我会在元素添加的单击事件上放置一个控制台日志,以确保调用该函数,并且我还会在控制台日志中记录变量 Description 的值。
也有可能id为"add"的元素是提交按钮,这意味着它会触发刷新事件,所以你必须使用
$('#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>
我正在尝试将输入到表单中的值保存到本地存储,
当我检查本地存储时,我正在使用的密钥与 []
一起作为其唯一值
这是不是说它是以数组的形式输入的?它只是不填充数组?
据我所知,我正在使用 stringify to setItem and parse to getItem
如何将数组中的值添加到 localstorage 中的键,然后检索它们?我已经写了一个没有错误的解决方案,但它除了 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>
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 代码,我们可以提供进一步帮助。
几件事:
您的代码:
function setArrayInLocalStorage(keyWords, localArray) {
localStorage.setItem(key, JSON.stringify(localArray));
}
应该是:
function setArrayInLocalStorage(keyWords, localArray) {
localStorage.setItem(keyWords, JSON.stringify(localArray));
}
密钥未定义。
我也不确定您的 html 长什么样,因为它没有提供给我们。您确定要为 Description 传递一个值,并且在添加函数时实际调用该函数吗?我会在元素添加的单击事件上放置一个控制台日志,以确保调用该函数,并且我还会在控制台日志中记录变量 Description 的值。
也有可能id为"add"的元素是提交按钮,这意味着它会触发刷新事件,所以你必须使用
$('#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>