如何检查是否设置了存储项目?


288

如何检查是否设置了项目localStorage?目前我正在使用

if (!(localStorage.getItem("infiniteScrollEnabled") == true || localStorage.getItem("infiniteScrollEnabled") == false)) {
    // init variable/set default variable for item
    localStorage.setItem("infiniteScrollEnabled", true);
}

2
似乎,如果没有存储互斥锁,您将遇到问题
4esn0k 2013年

Answers:


505

如果该项不存在getItem,则WebStorage规范中的方法显式返回null

...如果给定键在与对象关联的列表中不存在,则此方法必须返回null。...

所以你可以:

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

请参阅以下相关问题:


1
您可以添加自己的方法localStorage来封装此小测试吗?例如localStorage.hasItem("infiniteScrollEnabled")
Paul D. Waite'7

4
@Paul:是的,您甚至可以扩充Storage.prototype对象,但是根据经验,我总是建议不要修改您不拥有的对象,尤其是宿主对象。
CMS 2010年

是的,那里的好处。出于CSS背景,我自己可以解决浏览器问题的想法很令人兴奋,但是我可以看到浏览器对象的混乱可能会引起混乱。
Paul D. Waite,2010年

5
该注释不正确- Storage接口的当前版本专门指出值是type DOMStringw3.org/TR/webstorage/#the-storage-interface
Alnitak

1
注意已删除。感谢@TimothyZorn和Alnitak
CMS

45

您可以使用hasOwnProperty方法进行检查

> localStorage.setItem('foo', 123)
undefined
> localStorage.hasOwnProperty('foo')
true
> localStorage.hasOwnProperty('bar')
false

适用于当前版本的Chrome(Mac),Firefox(Mac)和Safari。


2
它应该是公认的答案。被接受的人会认为未设置存储的“空”值,这是错误的。
Flavien Volken

9
@FlavienVolken但是您不能具有存储null值。您可以使用"null",但其中的代码不会对它造成不良影响,而此代码将在length输入时失败。
Kaiido

1
@Kaiido,您是对的,我有这种行为,因为我直接解析了存储的数据并且JSON.parse("null") === JSON.parse(null)发生了冲突。
Flavien Volken

3
得到了以下ESLint错误:“请勿从目标object.eslint(no-prototype-
builtins

如果未在页面加载中设置foo,而您想对foo进行操作,则此方法将无效。我认为这就是发问者要解决的问题,您想检查键是否foo存在,而不是foo是否具有值。我遇到这种情况,其中click事件.setitem以基于getItem的逻辑触发,但是直到我setItem才起作用,并且直到我知道foo的状态(value1或value2),我才可以设置setItem。换句话说,检查foo出口,然后将其设置为value1,如果它没有意外覆盖value2的话。
Rin和Len

22

如果密钥不在存储中,最短的方法是使用默认值:

var sValue = localStorage['my.token'] || ''; /* for strings */
var iValue = localStorage['my.token'] || 0; /* for integers */

4

如果要检查未定义内容,也可以尝试以下方法:

if (localStorage.user === undefined) {
    localStorage.user = "username";
}

getItem是一种方法,如果找不到值,则返回null。


3
if(!localStorage.hash) localStorage.hash = "thinkdj";

要么

var secret =  localStorage.hash || 42;

JavaScript返回第一个非null或正值的示例:[null || “ abc”]将返回“ abc” [2 || 5]将返回2 [0 || 5]将返回5 [1 || 5]将返回1等。因此上述代码可以正常工作。
迪帕克·托马斯

2

为真

localStorage.infiniteScrollEnabled = 1;

虚假

localStorage.removeItem("infiniteScrollEnabled")

检查存在性

if (localStorage[""infiniteScrollEnabled""]) {
  //CODE IF ENABLED
}

1

您应该在localStorage中检查项目的类型

if(localStorage.token !== null) {
   // this will only work if the token is set in the localStorage
}

if(typeof localStorage.token !== 'undefined') {
  // do something with token
}

if(typeof localStorage.token === 'undefined') {
  // token doesn't exist in the localStorage, maybe set it?
}

1

如何测试一个项目的存在localStorage?此方法适用于Internet Explorer。

<script>
    try{
        localStorage.getItem("username");
    }catch(e){
        alert("we are in catch "+e.print);
    }
</script>

2
当然不应该;对于不存在的键,getItem只返回null。
EricLaw

我在IE上遇到了同样的问题,这就是它的解决方法++
edencorbin

try | catch解析项目时绝对应该。
阿卜杜勒·萨迪克·雅尔辛

0
localStorage['root2']=null;

localStorage.getItem("root2") === null //false

也许最好对计划进行扫描?

localStorage['root1']=187;
187
'root1' in localStorage
true

0

我可以建议的最好和最安全的方式是,

if(Object.prototype.hasOwnProperty.call(localStorage, 'infiniteScrollEnabled')){
    // init variable/set default variable for item
    localStorage.setItem("infiniteScrollEnabled", true);
}

这通过了ESLint的no-prototype-builtins规则。


0

我已经在我的项目中使用过,并且对我来说效果很好

var returnObjName= JSON.parse(localStorage.getItem('ObjName'));
if(returnObjName && Object.keys(returnObjName).length > 0){
   //Exist data in local storage
}else{
  //Non Exist data block
}

0

简便的方法是

if(localStorage.test){
console.log("now defined");
}
else{
console.log("undefined");
localStorage.test="defined;"
}

怎么运行的

第一次调用localStorage.test时,它不包含任何到localStorage对象的存储,因此它返回未定义的条件触发器。在其他条件触发之后,我设置了新变量,然后再次检查它是否包含数据,以便在if条件下返回true的数据


-2

试试这个代码

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

} else {

}

做还是不做。没有“尝试”。一个好的答案总是可以解释这样做的原因以及这样做的原因,不仅对于OP,而且对于将来的SO访问者也是如此。
Jay Blanchard
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.