sessionStorage не возвращает правильный результат в JavaScript - PullRequest
Новая
       32

sessionStorage не возвращает правильный результат в JavaScript

0 голосов
/ 20 февраля 2019

Я пытаюсь включить и отключить флажок при нажатии клавиши на моей веб-странице.Я пытаюсь использовать sessionStorage, чтобы сделать его последним между обновлениями страницы, но не между сеансами браузера.

$(document).ready(function(){
  var set = sessionStorage.getItem('disable');
  if (sessionStorage.getItem('disable') === null){
     $("#cblDoctors_3").prop('disabled', false);
  } else{
    $("#cblDoctors_3").prop('disabled', set);
  }
  console.log(set);
});

$("html").keypress(function( event ){
  if(event.which == 119){ //this is the 'w' key
      var box = $("#cblDoctors_3").prop('disabled');
      $("#cblDoctors_3").prop('disabled', !box);
      sessionStorage.removeItem('disable');
      sessionStorage.setItem('disable', !box);
      console.log(sessionStorage.getItem('disable'));
  }
});

Так что все работает нормально, консоль записывает правильное состояние элемента хранения, но при перезагрузке страницы после сохранения элемента сеанса окно никогда не активируется при обновлении страницы, даже если предполагается, что,Итак, допустим, что пользователь «включил» поле после того, как оно было отключено, консоль будет записывать в журнал значение false, что означает: prop («disabled», false).Это ожидаемый результат.Но когда страница обновляется, несмотря на то, что элемент сеанса имеет значение false, поле все равно будет отключено, что означает, что страница интерпретирует prop ('disabled', true), несмотря на то, что консоль переменной сеанса записывает в журнал 'false'.Чего мне не хватает?

1 Ответ

0 голосов
/ 20 февраля 2019

Предостережение заключается в том, что Storage (интерфейс за LocalStorage и SessionStorage) допускает сохранение только DOMString в качестве значений (при использовании setItem()).Цитирование документа :

storage.setItem(keyName, keyValue);

  • keyName Строка DOMString, содержащая имя ключа, который вы хотите создать / обновить.
  • keyValue Строка DOMString, содержащая значение, которое вы хотите дать ключу, который вы создаете / обновляете.

То же самое с getItem() - либо возвращает null, если под данным ключом нет ни одного элемента или DOMString.

Так что, если вы запустите его так: 

sessionStorage.setItem('disabled', false);

... он фактически преобразует логическое значение в DOMString.Это легко проверить: просто запустите ... 

console.log( typeof sessionStorage.getItem('disabled') );

... и вот, вот 'string' вместо ожидаемого 'boolean'.

Теперь, jQuery.prop на самом делене проверяет тип аргумента при работе со свойством disabled.И когда это строка 'false', она просто преобразует ее в логическое значение, чтобы решить, нужно ли удалять атрибут или нет.И, как вы наверняка знаете, Boolean('false') === true.

Что делать тогда?Один из возможных подходов - не хранить значение вообще - просто очистите элемент, когда он не нужен.Другой хранит пустую строку (так как это единственная строка, которая преобразуется в false).В этом случае решающая часть тривиальна: 

if (event.which == 119) { //this is the 'w' key
  var isDisabled = $("#cblDoctors_3").prop('disabled');
  sessionStorage.setItem('disabled', isDisabled || '');
}

// ...
const isDisabled = Boolean( sessionStorage.getItem('disable') ); 
// it'll be false for both null and ''
$('#cblDoctors_3').prop('disabled', isDisabled);
...