如何在没有按钮的情况下将值保存到 chrome 存储?
How to save value to chrome storage without button?
需要在不使用 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.
我的解决方案
为了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);
}
});
}
您可能会承诺 chrome.storage.sync.set
然后只在存储 API 解决后创建一个新调用。
这个想法听起来不错,但您可以改为使用 "setInterval" 和 "previous value" 变量:
var oldData = null;
setInterval(
()=>{
var data = {
title: titleUserTab.value,
url: urlUserTab.value,
};
if (data!=oldData) {
saveOption('dataUserTab', data);
}
oldData=data
},
4000);
我们可以更新输入模糊事件的变化,而不是为每个角色更新数据。只有在输入模糊后才会触发。
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 库进行去抖
需要在不使用 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.
我的解决方案
为了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);
}
});
}
您可能会承诺 chrome.storage.sync.set
然后只在存储 API 解决后创建一个新调用。
这个想法听起来不错,但您可以改为使用 "setInterval" 和 "previous value" 变量:
var oldData = null;
setInterval(
()=>{
var data = {
title: titleUserTab.value,
url: urlUserTab.value,
};
if (data!=oldData) {
saveOption('dataUserTab', data);
}
oldData=data
},
4000);
我们可以更新输入模糊事件的变化,而不是为每个角色更新数据。只有在输入模糊后才会触发。
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 库进行去抖