个人中心
gpt4 book ai didi

javascript - 将标签输入保存在数组中并在重新打开时显示

转载 作者：行者123 更新时间：2023-12-03 00:34:52 25 4
gpt4 key购买 nike

我有一个 chrome 扩展弹出窗口，用户可以在其中键入他们想要关注的 subreddits。 /image/t2db4.jpg

标签将保存为数组。但是，一旦关闭并重新打开弹出窗口，数组就会恢复为空。

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

我尝试过的:我尝试了“localstorage”，但它不起作用，并且与“reddit.push”混淆

Uncaught TypeError: reddits.push is not a function

不用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 = [];

最佳答案

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

此外，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
}

关于javascript - 将标签输入保存在数组中并在重新打开时显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53702567/

25 4 0
文章推荐： asp.net - 隐藏 gridView 中的列
文章推荐： powershell - 如何通过 PowerShell 列出 subreddit 的热链接？
文章推荐： javascript - 我应该在 JavaScript 中使用分号吗？
文章推荐： elasticsearch - 更改 Elasticsearch 映射
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com