Как сохранить значение в хранилище chrome без кнопки?

Question

Необходимо сохранить входное значение типа text в chrome.storage.sync.set без использования кнопки ok.

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

Проблема

1. Событие change триггеров текстовых элементов из-за потери фокуса. В этом случае проблема заключается в том, чтобы нажать кнопку ok, чтобы потерять фокус.

2. Событие input текстового элемента срабатывает каждой кнопкой клавиатуры. Проблема заключается в пределах chrome.storage.sync:

MAX_WRITE_OPERATIONS_PER_HOUR = 1800 Максимальное количество операций установки, удаления или очистки, которые могут выполняться каждый час.

MAX_WRITE_OPERATIONS_PER_MINUTE = 120 Максимальное количество операций установки, удаления или очистки, которое может выполняться каждую минуту.

Описание

Мое решение

Чтобы 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);

Но если вы хотите, чтобы данные обновлялись динамически перед размытием, лучше использовать 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

Мы также можем использовать loda sh библиотеку для противодействия

Answer 2

Идея звучит неплохо, но вместо этого вы можете использовать «setInterval» вместе с переменной «предыдущее значение»:

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

Answer 3

Вы потенциально можете обещать chrome.storage.sync.set, а затем создать новый вызов API хранилища только после его разрешения.