HTML5本地存储：检查键是否存在

Question

为什么这个不起作用？

if(typeof(localStorage.getItem("username"))=='undefined'){
    alert('no');
};

目标是如果用户未登录，则将其从主页重定向到登录页面。此处变量 localStorage.getItem("username")) 目前未定义。 这是一个用于 ios phonegap 应用程序的功能。

- Gabriel

---

我很惊讶还没有人说过 - 不鼓励客户端安全。一个人可以简单地按F12，然后运行 localStorage['username']='admin' 然后操纵你的网站。 - oriadam

@oriadam 我希望没有人基于localStorage授权，但在localStorage中存储JWT accessToken是完全可以的。 - Filippo De Luca

Answer 1

引用自规范：

getItem(key)方法必须返回与给定键相关联的当前值。如果给定的键不存在于与对象关联的列表中，则此方法必须返回null。

你应该确实检查是否为null。

if (localStorage.getItem("username") === null) {
  //...
}

- UltraInstinct

---

谢谢，这是我的第一个错误！但是，即使使用if(typeof(localStorage.getItem("username"))===null)，它也不起作用。如果用户名不存在，会弹出警告框。 - Gabriel

null 的类型是 "null"，不是 null（希望我说得清楚）。 - georg

@Gabriel：移除typeof(..)。请再次检查我的答案。 - UltraInstinct

值得注意的是，FF（28.0）对其localStorage表所施加的约束允许空值：CREATE TABLE webappsstore2 (scope TEXT, key TEXT, value TEXT, secure INTEGER, owner TEXT)而Chrome则不允许：CREATE TABLE ItemTable (key TEXT UNIQUE ON CONFLICT REPLACE, value BLOB NOT NULL ON CONFLICT FAIL)。 - Hans

@Derin 不对，如果“用户名”实际上存在，但存储的值为false呢？ - UltraInstinct

Answer 2

这种方法对我有效：

if ("username" in localStorage) {
    alert('yes');
} else {
    alert('no');
}

- user3332298

---

在我看来，这是最好的选择，因为它区分了一个值是否已经被设置和它是否可能为false/falsey。 - Allan Nienhuis

这种解决方案会针对 length 等关键字产生错误的正面结果。被接受的答案是解决这个问题的正确方式。 - kamoroso94

我喜欢这个解决方案。它很简洁。 - Stuart

被接受的解决方案没有起作用。虽然你的完全是救命稻草！谢谢 :-) - manjiro sano

这种方法大多数时候都可以工作，但总有一天会让你措手不及。在开发控制台中运行 localStorage.__proto__，您将看到可能会发生冲突的属性。 - rob

Answer 3

更新：

if (localStorage.hasOwnProperty("username")) {
    //
}

当值不期望为空字符串、null或任何其他假值时，另一种相关的方法：

if (localStorage["username"]) {
    //
}

- Derin

---

这是 if( localStorage["username"]==undefined ) 的缩写。 - Allan Ruin

不完全正确——它是对 if (localStorage["username"]==undefined || localStorage["username"]==0 || localStorage["username"]==null || localStorage["username"]==false || localStorage["username"]=='') 的缩写。@AllanRuin - oriadam

不完全正确；你们俩都理解反了。它的缩写是 if (localStorage["username"]!==undefined && localStorage["username"]!==0 && localStorage["username"]!==null && localStorage["username"]!==false && localStorage["username"]!=='')。 - JoL

@JoL 哈哈，你说得对 :) 我正在更新答案。 - oriadam

这种方法似乎更好，因为它只检查键而不需要无谓地返回键值，例如，if (localStorage.getItem(key) === null)。 - Yogi

但是如果“username”被设置为任何假值之一，那么(localStorage [“username”]) { // }将被视为真值，因为localStorage将这些值存储为“字符串”。你将得到“undefined”，“null”等。 - kob003

Answer 4

根据MDN文档，getItem方法的实现方式如下：

Object.defineProperty(oStorage, "getItem", {
      value: function (sKey) { return sKey ? this[sKey] : null; },
      writable: false,
      configurable: false,
      enumerable: false
    });

如果该值未设置，则返回null。您在测试它是否为undefined。请检查它是否为null。

if(localStorage.getItem("username") === null){

- Quentin

---

没错，我已经回复了上面的Thrustmaster。但是这并没有更好的解决问题 :/ - Gabriel

这个对我有效。 - Quentin

@Gabriel — 在你上面的评论中，你正在将值的 typeof 与 null 进行比较。你需要比较实际的值。 - Quentin

或者使用 == 而不是 ===，因为（出于某种奇怪的原因）null == undefined 是 true。再说了，你什么都不需要，就像 @Derin 回答的那样，你可以简单地写成 if (localStorage["username"])。 - oriadam