问题

Question

需要使用text按钮将chrome.storage.sync.set类型的输入值保存到ok。

<input id="titleUserTab" type="text">
<input id="urlUserTab" type="text">

问题

文本元素的事件change由于失去焦点而触发。在这种情况下，必须按下按钮ok才能失去焦点。
文本元素的事件input由每个键盘的按钮触发。问题是chrome.storage.sync的限制：

MAX_WRITE_OPERATIONS_PER_HOUR = 1800可以设置，删除或清除的最大操作数每小时进行一次。

MAX_WRITE_OPERATIONS_PER_MINUTE = 120可以设置，删除或清除的最大操作数每分钟执行一次。

Description

我的解决方案

要remove按钮ok，请使用input事件。

对于save的值，我在触发时间之前添加了一个间隔并删除了处理程序。

您如何看待这种情况？也许您有自己的解决方案？感谢您的帮助。

// onload page
function restoreUserTabContext(data) {
    titleUserTab.value = data.title;
    urlUserTab.value = data.url;

    titleUserTab.addEventListener('input', onInputUserTabContext);
    urlUserTab.addEventListener('input', onInputUserTabContext);
}

// handler
function onInputUserTabContext() {
    titleUserTab.removeEventListener('input', onInputUserTabContext);
    urlUserTab.removeEventListener('input', onInputUserTabContext);

    setTimeout(function () {
        let data = {
            title: titleUserTab.value,
            url: urlUserTab.value,
        };

        titleUserTab.addEventListener('input', onInputUserTabContext);
        urlUserTab.addEventListener('input', onInputUserTabContext);

        saveOption('dataUserTab', data);
    }, 4000);
}

function saveOption(key, value) {
    option = {};
    option[key] = value;

    chrome.storage.sync.set(option, function () {
        if (chrome.runtime.lastError) {
            console.error(chrome.runtime.lastError.message);
        }
    });
}

Answer 1

我们可以更新输入模糊事件的变化，而不是为每个字符更新数据。仅在输入模糊后才会触发。

因此，这仅在输入模糊时更新（例如，当我们在输入外部单击时）

 function onBlur() {
        let data = {
            title: titleUserTab.value,
            url: urlUserTab.value,
        };
        saveOption('dataUserTab',data);
 }    
 titleUserTab.addEventListener('blur', onBlur);
 urlUserTab.addEventListener('blur', onBlur);

但是，如果要在模糊之前动态更新数据，最好使用去抖动。因此，在每次更改后，我们都会延迟调用保存函数，如果在延迟结束之前进行了新的更改，则延迟将被取消，并等待新的延迟完成。这类似于您的方法，但是更简单，因为我们不需要清除事件侦听器并频繁添加它们。反跳功能将是这样

function debounce(func, wait, immediate) {

  var timeout;

  return function executedFunction() {
    var context = this;
    var args = arguments;

    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };

    var callNow = immediate && !timeout;

    clearTimeout(timeout);

    timeout = setTimeout(later, wait);

    if (callNow) func.apply(context, args);
  };
};
function onBlur() {
    let data = {
        title: titleUserTab.value,
        url: urlUserTab.value,
    };
    saveOption('dataUserTab', data);
}
titleUserTab.addEventListener('input', debounce(onBlur, 1000));
urlUserTab.addEventListener('input', debounce(onBlur, 1000));

以上代码在更新数据之前等待1秒钟。 ref

我们还可以使用lodash库进行反跳

Answer 2

您可能会承诺chrome.storage.sync.set，然后仅在解析后对存储API创建一个新调用。

Answer 3

这个想法听起来不错，但是您可以改为使用“ setInterval”和“先前值”变量：

var oldData = null;
setInterval(
  ()=>{
    var data = {
      title: titleUserTab.value,
      url: urlUserTab.value,
    };
    if (data!=oldData) {
      saveOption('dataUserTab', data);
    }
    oldData=data
  },
4000);

如何在没有按钮的情况下将价值保存到Chrome存储中？

问题

我的解决方案

3 个答案: