Как установить предопределенный ключ до установки локального хранилища? - PullRequest
Новая
       5

Как установить предопределенный ключ до установки локального хранилища?

0 голосов
/ 07 января 2019

У меня есть горячая клавиша, которая щелкает элемент на странице и использует ключ по умолчанию '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);

1 Ответ

0 голосов
/ 07 января 2019

Ваша проблема в том, что при первом запуске кода вы устанавливаете 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.

Вы называете параметр 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: 

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