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

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返回的值，如果没有缓存任何内容(第一次)，它将返回null。

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

这意味着你的代码本质上是这样的：

key = 82;
setTimeout(() => {
key = null; // <-- you overwrite the key with null on the first run
});

仅当localStorage没有以前缓存的值时，才尝试设置key的默认值：

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.keyCode == key比较时，它将覆盖全局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();
}
}
}

如果activate中的key是例如'abcd'，则代码将执行'abcd'.keyCode == 'abcd'。

解决这个问题的一种方法是重命名activate的参数：

function activate(activationKey) {
if (IsInputing == false) {
if (activationKey.keyCode == key) {
console.log('key pressed')
element.click();
}
}
}