时间戳

首页 > 解决方案 > 如何在设置本地存储之前设置预定义密钥？

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

问题描述

我有一个热键，可以单击页面上的元素并使用默认键“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);

标签： javascriptlocal-storagegame-development

解决方案

您的问题是，代码第一次运行时，您设置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
});

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功能中还有另一个错误。

您将参数命名为activateas ，这将在您进行比较时key隐藏全局变量。keykey.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's 参数：

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

推荐阅读