logo标签列表

如何检查本地存储变量是否为null或未定义？

javascript
25

我有这段代码：

var sideBar = localStorage.getItem('Sidebar');

我想检查 sideBar 是否在 if 语句中被定义且不为 null。我有点困惑，我知道：sideBar == undefined 和 sideBar != null，但是否有一个好的方法可以在 if 语句中同时检测这两个条件：

if (??)
可能是重复的问题：如何在JavaScript中检查未定义或空变量？ - Kristján
8个回答
27

检查变量是否已定义且不为null的最佳实践：

if (typeof sideBar !== 'undefined' && sideBar !== null)

编辑：我意识到您检查的不是未定义的内容，而是检查它是否被定义，因此再次进行了编辑以更准确地回答您的请求。

1
检查 null 是不必要的。我们可以直接检查 undefined，如果是 undefined，则 getItem() 的结果将自动为 null。 - Iman Sedighi
你说得对，发布的代码确实不需要显式检查未定义。然而，这个答案提供了一个通用的目的来检查变量是否为null或undefined。例如，改变代码顺序可能会创建一个情况，在分配值之前检查变量，而这个检查仍然可以工作。 - kinakuta
我不确定是否已经改变，但在我的示例中，我有一个具有值“undefined”的项目，而!== null返回true。 - DjangoDev1
2023年我会在TypeScript中使用以下代码：if (!!token && token.trim() !== 'undefined') {...}。这段代码检查了null、undefined、""（空字符串）以及键的值为'undefined'（一个字符串）的情况。 - MikhailRatner
9
根据W3手册明确说明： getItem(key)方法必须返回与给定键相关联的当前值。如果给定的键在对象关联的列表中不存在，则此方法必须返回null。
这意味着无需检查undefined，如果它是undefined，则getItem()方法的结果将为null。您只需要针对null进行检查即可。
if (localStorage.getItem("Sidebar") !== null) {
//...
}
1
我认为这是最好的答案，不需要检查undefined，因为它不存在于localStorage.getItem方法的返回值中。 - xgqfrms
8
  1. localStorage 使用字符串来保存数据，即您在考虑 null vs. undefined 等时总是要考虑 JavaScript 字符串逻辑。
  2. 如果您设置了“sideBar”，请确保不使用“falsy”值。对于字符串而言，只有空字符串""才是“falsy”值。如果您在变量进行 if 检查之前执行其他操作（例如一些数学运算），则需要考虑其他情况。

以下是一些测试，展示了JavaScript在if语句中处理某些值的方式：

> ("")? true : false
false                 # empty string         -> if fails
> (0)? true : false
false                 # Number 0             -> if fails
> ("0")? true : false
true                  # String "0"           -> if succeeds
> (null)? true : false
false                 # JavaScript null      -> if fails
> ("someText")? true : false
true                  # any other String     -> if succeeds
> (" ")? true : false
true                  # a space character    -> if succeeds

我不会使用笨拙的双重检查来检查 null 和 undefined。 如果直接检查 localStorage.getItem 的结果，结果只可能是 null 或者一个 String。如果你认为空字符串 "" 也是“假”的话， 一个简单的 if 语句就足够了：

var sideBar = localStorage.getItem('Sidebar');

if(sideBar) {
   // do something with the sideBar
}
else {
   // do something without the sideBar
}

如果要真正检查localStorage中的sideBar是否被设置，您需要添加一个检查空字符串并将其视为“已定义”的检查：

if(sideBar || sideBar === "") {
    // sideBar defined, maybe even as empty String
}
else {
    // sideBar not set in localStorage
}
1
你可以将localStorage中的值设置为空字符串，这意味着它与未定义或null不等价。 - kinakuta
是的，这也是我在我的答案中讨论的。空的 String 需要被视为“假值”。 - Juve
但是为什么？OP正在询问如何检查值是否已定义或不为空。他们没有提到还要检查它是否为空字符串。 - kinakuta
但我猜这就是他/她真正想要的。检查sideBar是否有用的值。如果空字符串需要额外处理，那么我会添加sideBar !== ""。 - Juve
我是否错过了OP在其他地方实际上说过这句话？事实上，在原始帖子中并没有传达这一点。实际上，它非常具体：“我想在if语句中检查sideBar是否已定义且不为null”。 - kinakuta
2

只需要使用ES2020的简单方法nullish coalescing运算符

空值合并运算符（??）是一个逻辑运算符，当左侧操作数为null或undefined时，返回其右侧操作数，否则返回左侧操作数。

解决方案


const sideBar = localStorage.getItem('Sidebar') ?? false;

if(sideBar) {
  // true
} else {
  // false
}

顺便说一下，在使用 localStorage.getItem 方法时，您不需要检查 undefined。

Storage 接口的 getItem() 方法，当传入一个键名时，将返回该键的值；如果该键不存在，则返回给定 Storage 对象中的 null。

参考资料

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem

1

这应该可以工作，但是除了 “if” 之外，即使使用三元运算符也没有其他方式。

if( !value ) {
}

这将检查值是否为“真实”，并应涵盖“null”和“undefined”。

1
它将检查0、NAN、空字符串和"false" :)。 - Dane Balia
但是0是一个有效的值。你的检查会返回false。 - kinakuta
不确定这是否是他正在寻找的内容。但我很欣赏你的观点，虽然在某些情况下 falsey 可能是合法的。但这就是为什么 0、''、NULL 和 undefined 被分组的原因，因为它们在程序设计中是 falsey。 - Dane Balia
1
没错，但如果你特别检查定义或空值，检查真实性可能会有危险。 - kinakuta
你们在争论语义，偏离了最初的问题。我提出的建议解决了所述的问题，即 null 或 undefined。 - Dane Balia
显示剩余4条评论
1

是的，你可以用 && 把它们绑定在一起（意味着两个条件都必须为真）。

所以... 只有当每个条件都为真时，if (sideBar === undefined && sideBar !== null) 才会被评估为真。

你好。你能否评论一下Y_s的建议？使用===会更好吗？ - user1679941
@Marilou，使用严格相等运算符“===”可能会更好。我将使用严格比较进行编辑。JavaScript很奇怪，它有两种相等和严格相等，这在大多数语言中并不是这样的情况。 - evanmcdonnal
0
0

到了2023年，应该改为以下代码：

if (!!token && token.trim() !== 'undefined') {...}

这段代码检查了token的值是否为null、undefined、""（空字符串），以及键的值是否为'undefined'（字符串形式的undefined）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接