如何在localStorage中存储布尔值

如何在localStorage中存储布尔值

最后修改时间:2 months ago

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

从上述简单的示例中,我们可以看到。即便将 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:

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

思路3:

if("") 返回为 false

// 存储 true 时
localStorage.setItem("bool", 1);

// 存储 false 时
localStorage.setItem("bool", "");

//取出 false 时
localStorage.getItem("bool");
1
2
3
4
5
6
7
8
- 全文完 -

留下一条留言?
默认颜色

主题颜色

标准颜色

更多颜色...