Question

我有一个热键，可单击页面上的元素并使用默认键“ r”。我也有一个输入，当输入一个键时，它允许更改热键。输入值时，将其缓存到本地存储。唯一的问题是，仅当输入设置为值时，默认键才与事件一起使用。

let IsInputing = true
let key = 82
 setTimeout(() => {
   key = localStorage.getItem('savedKey');

    input.onchange = function(){
        localStorage.setItem('savedKey', key)
    }

    window.addEventListener("keydown", activate, false);
    function activate(key) {
        if (IsInputing == false) {
            if (key.keyCode == key) {
                console.log('key pressed')
                element.click();
            }
        }
    }
    input.onkeydown = function (key) {
        IsInputing = true
        key = key.keyCode;
        console.log('key changed')
        setTimeout(changeKey, 1000)
    }
    function changeKey() {
        IsInputing = false;
    }
}, 500);

Answer 1

您的问题是，代码第一次运行时，您将key设置为82，然后将其设置为返回的localStorage.getItem，它将返回{{1} }（如果没有）（第一次）。

null

这意味着您的代码基本上可以做到：

let key = 82;

setTimeout(() => {
  key = localStorage.getItem('savedKey');
});

仅在key = 82; setTimeout(() => { key = null; // <-- you overwrite the key with null on the first run });没有先前缓存的值时，才尝试为key设置默认值：

localStorage

或更简洁：

let DEFAULT_KEY = 82;
setTimeout(() => {
  key = localStorage.getItem('savedKey') || DEFAULT_KEY;
});

注意：为避免将来出现一些潜在的错误，您可能希望在返回缓存值时将其转换为数字（setTimeout(() => { key = localStorage.getItem('savedKey') || 82; });仅保存字符串）。

localStorage

或使用字符串作为默认值。

key = Number(localStorage.getItem('savedKey'));

具有一致的类型可以避免诸如意外比较之类的错误：

let DEFAULT_KEY = '82';

setTimeout(() => {
  key = localStorage.getItem('savedKey') || DEFAULT_KEY;
});

正如我对答案的评论中所述，您在'82' == 82 // true '82' === 82 // false函数中还有另一个错误。

您正在将activate的参数命名为activate，当您进行key比较时，它将遮盖全局key的变量。

key.keyCode == key

如果function activate(key) { // ^^^ you are using the same name as the global key if (IsInputing == false) { if (key.keyCode == key) { console.log('key pressed') element.click(); } } }中的key例如activate，则您的代码将执行'abcd'。

一种解决方法是重命名'abcd'.keyCode == 'abcd'的参数：

activate

在设置本地存储之前，如何设置预定义密钥？

1 个答案: