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

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 returns，如果没有缓存（第一次），它将 return 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;
});

注意：为了避免一些潜在的未来错误，您可能希望在 return 时将缓存值转换为数字（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();
    }
  }
}

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

How do i set a predefined key before local-storage is set?

javascript

game-development

local-storage