如何在使用存储关闭 chrome 扩展弹出窗口后保留更改答案

【问题标题】：How to keep changes from the chrome extension popup after closing it using storage如何在使用存储关闭 chrome 扩展弹出窗口后保留更改
【发布时间】：2019-03-30 10:01:31
【问题描述】：

我正在尝试创建一个 todo 列表 chrome 扩展，它使用一个弹出窗口，用户可以在其中输入文本（他们的 todo 列表项）并将其添加到列表中。我可以添加和删除列表项并对弹出窗口进行更改，但我想保存他们的数据，以便当他们关闭并打开弹出窗口时，他们的待办事项列表项仍然存在。我不太确定如何解决这个问题，因为我是 javaScript 和 chrome 扩展的新手。我相信您需要使用存储，但我不太确定如何实现它。

popup.html

<div class="container">
  <h2 class="title">Add Items</h2>
  <form id="addForm">
    <input type="text" id="item">
    <input type="submit" value="Submit">
  </form>
  <h2 class="title">List</h2>
  <ul id="items" class="list-group">
    <li class="list-group-item">
      <button class="delete">X</button>
      Click X button to delete item, type item in submit bar to add item
    </li>
  </ul>
</div>

popup.js

var form = document.getElementById('addForm');
var itemList = document.getElementById('items');

//form submit event
form.addEventListener('submit', addItem);
//delete event
itemList.addEventListener('click', removeItem);

//add item
function addItem(e) {
    e.preventDefault();

    //create delete button element
    var deleteBtn = document.createElement('button');

    //add classes to btn
    deleteBtn.className = "delete";

    //append text node
    deleteBtn.appendChild(document.createTextNode('X'));

    //get input value
    var newItem = document.getElementById('item').value;

    //create li element
    var li = document.createElement('li');

    //add class
    li.className = 'list-group-item';

    //append button to li
    li.appendChild(deleteBtn);

    //add text node with input value
    li.appendChild(document.createTextNode(newItem));

    //append li to list
    itemList.appendChild(li);

    savaData();

}

//remove item
function removeItem(e) {
    if (e.target.classList.contains('delete')) {
        var li = e.target.parentElement;
        itemList.removeChild(li);
    }
}

【问题讨论】：

首选方法是 chrome.storage.local ，它可以存储简单的对象。你可以找到很多例子。

标签： javascript google-chrome-extension local-storage storage

【解决方案1】：

您必须将数据保存在存储中。试试localStorage，因为它很容易使用。

您可以将其与JSON.stringify(<object-here>) 和JSON.parse(<string-here>) 结合使用以保存对象。

例子：

var my_data = {...};

// Save them
localStorage.setItem('my_date', JSON.stringify(my_data));

// Load them
my_data = JSON.parse(localStorage.getItem('my_date'));

您必须在页面加载时从 localStorage 加载它们，并在每次更改数据时存储它们。

【讨论】：