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

Question

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

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

问题

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

MAX_WRITE_OPERATIONS_PER_HOUR = 1800 The maximum number of set, remove, or clear operations that can be performed each hour.

MAX_WRITE_OPERATIONS_PER_MINUTE = 120 The maximum number of set, remove, or clear operations that can be performed each minute.

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

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

Answer 2

这个想法听起来不错，但您可以改为使用 "setInterval" 和 "previous value" 变量：

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

Answer 3

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

So this only updates when the input is blurred (like when we click outside the input)

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

但是如果你想让数据在模糊之前动态更新，最好使用debounce。因此，当每次更改后我们延迟调用保存函数时，如果在延迟结束之前有新的更改，延迟将被取消并等待新的延迟完成。这与您的方法类似，但更简单，因为我们不需要清除事件侦听器并经常添加它们。 debounce 函数将是这样的

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 库进行去抖

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

How to save value to chrome storage without button?

javascript

events

google-chrome-extension

event-handling

google-chrome-storage

问题

我的解决方案