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

Question

I'm trying to create a todo list chrome extension that uses a popup in which the user can input text(their todo list item) and it adds to a list. I'm able to add and remove list items and make changes to the popup but I want to save their data so when they close and open the popup their todo list items are still there. I'm not too sure how to go about this as I'm new to javaScript and chrome extensions. I believe you need to use storage but I'm not too sure how to implement it.

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);
    }
}

Answer 1

You will have to save the data in a storage. Try localStorage as it is easy to use.

You may combine it with JSON.stringify(<object-here>) and JSON.parse(<string-here>) to save objects.

Example:

var my_data = {...};

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

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

You will have to load them from the localStorage on page load and store them every time you change the data.