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

因此一切正常，控制台记录了存储项的正确状态，但是当页面重新加载时，一旦会话项被存储，该框就永远不会在页面刷新时重新激活，即使它应该如此。所以假设用户'enabled'禁用后的框，控制台会记录false，意思是：prop('disabled', false)。这是预期的结果。但是当页面刷新时，尽管会话项为假，该框仍将被禁用，这意味着页面正在解释 prop('disabled', true) 尽管会话变量控制台日志记录 'false'。我错过了什么？

Answer 1

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

storage.setItem(keyName, keyValue);

keyName A DOMString containing the name of the key you want to create/update.

keyValue A DOMString containing the value you want to give the key you are creating/updating.

与 getItem() 相同 - 它要么是 returns 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);

sessionStorage 在 javascript 中未返回正确结果

sessionStorage not returning correct result in javascript

javascript

jquery

session-storage