Javascript 将标记输入保存在数组中,并在重新打开时显示
我有一个chrome扩展弹出窗口,用户可以在其中输入他们想要的子插件 标记将保存为数组。但是,一旦关闭并重新打开弹出窗口,阵列将恢复为空 如何保存它,以便在重新打开时,该字段将由保存的数组填充 我尝试的是: 我尝试了localstorage,但它不起作用,而且它与reddit.push冲突 未捕获类型错误:reddits.push不是函数 如果没有saveList函数,可以很好地推送和拼接阵列Javascript 将标记输入保存在数组中,并在重新打开时显示,javascript,jquery,google-chrome-extension,Javascript,Jquery,Google Chrome Extension,我有一个chrome扩展弹出窗口,用户可以在其中输入他们想要的子插件 标记将保存为数组。但是,一旦关闭并重新打开弹出窗口,阵列将恢复为空 如何保存它,以便在重新打开时,该字段将由保存的数组填充 我尝试的是: 我尝试了localstorage,但它不起作用,而且它与reddit.push冲突 未捕获类型错误:reddits.push不是函数 如果没有saveList函数,可以很好地推送和拼接阵列 <!DOCTYPE html> <html lang="en"> <he
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Chrome Extension</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-tagsinput.css">
</head>
<body>
<div class="inputContainer">
<input type="text" id="Tags" class="form-control"/>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap-tagsinput.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</body>
</html>
您需要在使用变量之前声明它们 此外,localStorage仅存储字符串值。使用JSON.stringify将数组和对象转换为字符串,然后使用JSON.parse将它们转换回字符串
你太晚了。将声明移到文件顶部,以避免在声明之前使用它。最好使用本地存储而不是本地存储,特别是如果您希望最终将其移植到Firefox。谢谢!这就解决了打字错误的问题。但是当我重新打开弹出窗口时,数组又恢复了empty@KwokWenJian我已经更新了我的答案,以检查以前是否保存了任何数组。耶!它起作用了!然而,你知道如何在弹出窗口重新打开时用保存的数组重新填充它吗?@KwokWenJian看一看你正在使用的UI库的文档:它不应该循环通用数组,而是DOM集合。使用标准数组方式,如或
$('#Tags').tagsinput({
confirmKeys: [13, 32, 44]
});
$('input').on('itemAdded', function(event) {
reddits.push(event.item);
console.log(reddits);
saveList();
});
$('input').on('itemRemoved', function(event) {
reddits.splice(reddits.indexOf(event.item), 1);
console.log(reddits);
saveList();
});
function saveList() {
localStorage.setItem('redditList', reddits);
reddits = localStorage.getItem('redditList');
}
var reddits = [];
var reddits = []; // declare before using
var exists = localStorage.getItem('redditList');
if(exists) {
reddits = JSON.parse( exists );
}
$('#Tags').tagsinput({
confirmKeys: [13, 32, 44]
});
$('input').on('itemAdded', function(event) {
reddits.push(event.item);
console.log(reddits);
saveList();
});
$('input').on('itemRemoved', function(event) {
reddits.splice(reddits.indexOf(event.item), 1);
console.log(reddits);
saveList();
});
function saveList() {
localStorage.setItem('redditList', JSON.stringify(reddits)); // store it as string
reddits = JSON.parse( localStorage.getItem('redditList')); // convert it to object
}