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，该框仍将被禁用，这意味着尽管会话变量控制台记录为“ false”，页面仍在解释prop（'disabled'，true）。我想念什么？

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

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

1 个答案: