功能总是返回true

Question

$(document).ready(function() {

var state = localStorage.hasOwnProperty('sidebarState') ? localStorage.getItem('sidebarState') : false;

function setState() {
    if(state) {
        $('#sidebar').css('transform', 'translate(0,0)');
        state = false;
    }
    else {
        $('#sidebar').css('transform', 'translate(-100%,0)');
        state = true;
    }
    localStorage.setItem('sidebarState',state);
}

$('#sidebar_button').click(setState);

setState();

});

总是当我重新加载页面时，返回true，即使之前是假的，所以出了什么问题。

Answer 1

localStorage.setItem需要两个字符串。因此布尔值false将被强制转换为字符串＆＃34; false＆＃34;，它将评估为true。

一个解决方案是

localStorage.setItem('sidebarState', state ? state : "");

因为空字符串将评估为false。

来源：
http://dev.w3.org/html5/webstorage/#storage

Answer 2

我怀疑你将状态设置为true，然后使用

将其持久保存到localStorage

localStorage.setItem('sidebarState',state);

刷新页面时，将从localStorage读入状态并计算为true。