sessionStorage 没有在 javascript 中返回正确的结果

Question

我正在尝试启用和禁用网页按键上的复选框。我正在尝试使用 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”。我错过了什么？

Answer 1

这里需要注意的是Storage（LocalStorage 和 SessionStorage 后面的接口）只允许将DOMString 作为值存储（使用setItem() 时）。引用the doc:

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);