Chrome 扩展 - 如何将所做的更改保存到存储中？

Question

我是编码新手，目前我正在尝试构建一个 chrome 扩展，它可以充当一个小笔记本并可以在里面存储东西。我已经完成了一个非常原始的例子，但它工作得很好。目前最大的障碍是如何在关闭弹出窗口和浏览器后保存更改。我做了一些研究，发现我可以使用 localStorage 来存储数据。然而我有点迷茫，不知道从哪里开始以及如何使用它。

这就是我所有的东西

manifest.json

{
  "name": "1st extension",
  "description": "Try to build an extention",
  "version": "0.1",
  "manifest_version": 3,

  "background": {
    "service_worker": "background.js"
  },
  
  "action": {
    "default_popup": "popup.html",
    "default_title": "This is my first chrome extention",
  },
  "permissions": ["storage"],
  "options_page": "options.html"
}

popup.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <p>Type in something and save it below!</p>

    <textarea id="mytext" style="width: 300px;"></textarea>
    <button id="submit">Submit</button>
    <button id="clear">Clear</button>
    <ul id="items"></ul>

    <script src="popup.js"></script>
  </body>
</html>

popup.js

var myButton1 = document.getElementById("submit");
var myButton2 = document.getElementById("clear");
var itemList = document.getElementById('items');

itemList.addEventListener('click', removeItem);


//add new element into the list
function addItem(input) {
  // new element
  var li = document.createElement("li");
  // new delete button
  var deletebutton = document.createElement("button");
  //add classes to btn
  deletebutton.className = "delete";
  // text in the delete buttion
  deletebutton.appendChild(document.createTextNode('Delete'))
  // text in the new element
  li.appendChild(document.createTextNode(input));
  // combine text and the delete button
  li.appendChild(deletebutton);
  // conbine the element to the list
  itemList.appendChild(li);
}

//remove item from the list
function removeItem(element){
  itemList.removeChild(element.target.parentElement);
}

//clear the textarea
function clear(){
  document.getElementById('mytext').value = "";
};

myButton1.onclick = function() {
  var myText = document.getElementById('mytext').value;
  addItem(myText);
  clear();
}

myButton2.onclick = function() {
  clear();
}

Answer 1

使用存储很容易...

localStorage.setItem('Phone','1234-5678');

然后回读...

var Phone=localStorage.getItem('Phone');

但我希望您知道数据不会以隐身模式存在 windows 而且...有些浏览器（至少是我的浏览器）无论如何都会在您退出浏览器后清除所有存储空间.

所以这是一个非常不稳定的解决方案，如果您正在寻找永久保存到硬盘上，则不适合。

让我检查一下 Google API，看看他们还有什么可以保存到 HD。

这是一种方法，但是处理斑点不适合新手...

https://developers.google.com/web/updates/2011/08/Saving-generated-files-on-the-client-side

Chrome 扩展 - 如何将所做的更改保存到存储中？

Chrome extention - How to save changes that were made into storage?

javascript

google-chrome-extension