localStorage存入取出后,会自动变成字符串类型,稍不注意容易导致一系列问题。如何优雅的存取布尔值呢?
首先,我们先通过一段简单的代码来了解下它
<p><span id="hello">点我试试</span></p>
1
document.querySelector("#hello").addEventListener("click", () => {
let bool = false;
alert(typeof(bool)) // boolean
localStorage.setItem("bool", bool);
alert(localStorage.getItem("bool")) // "false"
alert(typeof(localStorage.getItem("bool"))) // string
localStorage.getItem("bool")?alert("真"):alert("假") // 真
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
从上述简单的示例中,我们可以看到。即便将 false
原本存储进 localstroage
,待再取出的时候自动变成了字符串的格式。
布尔值 false 变成了 字符串 "false",如此一来,也使得再进行条件判断时出现了偏差。
知道了原由,我们也就能对症下药。避免存储时,传入 false ,问题也就迎刃而解。
思路1:
if(null) 返回为 false
// 存储 true 时
localStorage.setItem("bool", 1);
// 存储 false 时
localStorage.removeItem("bool");
//取出 false 时
localStorage.getItem("bool");
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
思路2:
if(0) 返回为 false
// 存储 true 时
localStorage.setItem("bool", 1);
// 存储 false 时
localStorage.setItem("bool", 0);
//取出 false 时
parseInt(localStorage.getItem("bool"));
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
思路3:
if("") 返回为 false
// 存储 true 时
localStorage.setItem("bool", 1);
// 存储 false 时
localStorage.setItem("bool", "");
//取出 false 时
localStorage.getItem("bool");
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8