首页 文章

将taginputs保存在数组中并在重新打开时显示

提问于
浏览 404
0

我有一个chrome扩展弹出窗口,用户可以键入他们想要关注的subreddits . https://imgur.com/a/vjw2rMm

标签将保存为数组 . 但是,一旦弹出窗口关闭并重新打开,阵列就会变回为空 .

如何保存它,以便在重新打开时,字段将由保存的数组填充?

What i tried: 我试过"localstorage"但是它不起作用而且它与"reddit.push"混淆

未捕获TypeError:reddits.push不是函数

没有saveList函数,可以推送和拼接数组 .

<!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>

JavaScript的

$('#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 = [];

1 回答

  • 1

    您需要在使用它们之前声明变量 .

    此外,localStorage仅存储字符串值 . 使用 JSON.stringify() 将数组和对象转换为字符串,然后使用 JSON.parse() 将它们转换回来 .

    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
    }
    

相关问题