javascript - 如何设置可编辑 div 的初始值？

Question

所以，我有一个适用于 Google Chrome 的记事本扩展程序，可以同步并显示用户存储的笔记。目前我的问题如下。

下载后首次运行扩展程序时，可编辑 div (id = edit_notepad) 中会显示“未定义”一词。我希望它只是空白而不是显示任何内容。显然，我知道它是未定义的，因为用户还无法添加任何文本。

初始运行时显示的图片:

在我的内容脚本中，这是我的 chrome.storage 获取和设置函数(确实有效):

document.body.onload = function() {
  chrome.storage.sync.get("edit_notepad", function(items) {
    if (!chrome.runtime.error) {
      console.log(items);
      document.getElementById("edit_notepad").innerHTML = items.edit_notepad;
    }
  });
}

document.getElementById("edit_notepad").onkeyup = function() {
  var d = document.getElementById("edit_notepad").innerHTML;
  chrome.storage.sync.set({ "edit_notepad" : d }, function() {
    if (chrome.runtime.error) {
      console.log("Runtime error.");
    }
  });
}

我想我需要某种 if 语句，但是经过几个小时的尝试，我不知道它到底包含什么。我一直遇到的问题是，无论我将 edit_notepad 的初始值设置为多少，即使用户写了一些注释，它也总是会恢复为“未定义”!例如当记事本关闭并重新打开时，“这是一个笔记测试”将恢复为“未定义”。

Answer 1

嗯，一个简单的方法是在 chrome.storage.sync.get() 中指定一个默认值。 。当存储中不存在 key 时，这样做将应用默认值。但是，考虑到您要替换可能已存在的任何内容，更好的解决方案是在没有存储值或存储无效值时不要设置内容。唯一有效的值是一个字符串。当您没有存储任何值时，这将防止您覆盖网页提供的任何默认值。因此，if类似下面的语句应该有效(或者，您可以测试 !== 'undefined' :

document.body.onload = function() {
  chrome.storage.sync.get("edit_notepad", function(items) {
    if (!chrome.runtime.error) {
      console.log(items);
      if(typeof items.edit_notepad === 'string') {
          document.getElementById("edit_notepad").innerHTML = items.edit_notepad;
      }
    }
  });
}

注意:存储可编辑<div>的内容每个键都会导致许多用户遇到 MAX_WRITE_OPERATIONS_PER_MINUTE and MAX_WRITE_OPERATIONS_PER_HOUR quotas 。您需要有一些其他标准才能写入 storage.sync 。也许您可以暂时将该值存储在 storage.local 中并且仅限 storage.sync每隔几分钟。