Javascript 如果本地存储为空，则在HTML输出上隐藏div字段

我有个问题，不知道该怎么办。如果我将某些内容保存到本地存储，则存储显示良好。但是，如果本地存储是空的，则空字段将显示在我的HTML页面上。如果本地存储空间为空，如何隐藏这些字段？有人能帮我吗？对不起，我对这件事的了解不是很好

数据用值键存储。到目前为止，这是可行的，但我想隐藏HTML页面上的空值键字段。只有在存储了任何数据时，才会显示它们

现在，我尝试隐藏空字段（长度、键、getItem等），但不起作用：

函数showStorage（）{
if（localStorage.getItem（'value'）！==null）{
//我的名字叫扎尔
document.getElementById（'num_keyvalues'）.innerHTML='（Number'+localStorage.length+'）；
}否则{
var keyValuePairs=''；
for（本地存储中的var键）{
keyValuePairs+=''+
'' +
键+“”+“”+
'' + 
''+''+localStorage.getItem（键）+
'' + '';
}
document.getElementById（'keyvalues'）。innerHTML=keyValuePairs；
}
}

处理问题确实不是一种优雅的方式，但你会得到想要的行为

    for (var key in localStorage) {
        if (localStorage.getItem(key) !== null) {
             keyValuePairs += '<div class="notizeintrag" id="notiz" draggable="true">' + '<div class="notizheader" id="header" draggable="true">' + key + '</div>' + '<div class="img" draggable="true">' + '<img src="note-small.png" draggable="true"/>' + '</div>' +
             '<div class="notiz">' + localStorage.getItem(key) + '</div>' + '</div>';
        }

for（localStorage中的var键）{
if（localStorage.getItem（键）！==null）{
keyValuePairs+=''+''+键+''+''+'''+'''+''''''+'''+
''+localStorage.getItem（键）+''+''；
}

@Wonkledge我用附加的代码尝试了这种方法，但是如果我这样做，我就不能再将数据保存或还原到LocalStorage。但是这些框在构建的HTML页面中消失了。这几乎是我想要的。当然，只有LocalStorage可以工作。；）

函数showStorage（）{
var keyValuePairs=''；
for（本地存储中的var键）{
if（localStorage.getItem（键）！==null）{
document.getElementById（'num_keyvalues'）.innerHTML='（Number'+localStorage.length+'）；
}
else[{
keyValuePairs+=''+''+键+''+''+'''+'''+''''''+'''
+''+localStorage.getItem（键）+''+''；
}
document.getElementById（'keyvalues'）。innerHTML=keyValuePairs；
//我的名字叫扎尔
document.getElementById（'num_keyvalues'）.innerHTML='（Number'+localStorage.length+'）；
}
}

您应该使用.hasOwnProperty筛选键，您看到的字段是来自localStorage原型对象的方法和属性

// zeigt alle gespeicherten Key-Value-Paare an 
function showStorage() {
  var keyValuePairs = '';
  for (var key in localStorage) {
    if (! localStorage.hasOwnProperty(key)) continue;
    keyValuePairs += '<div class="notizeintrag" id="notiz" draggable="true">' + '<div class="notizheader" id="header" draggable="true">' + key + '</div>' + '<div class="img" draggable="true">' + '<img src="note-small.png" draggable="true"/>' + '</div>' +
      '<div class="notiz">' + localStorage.getItem(key) + '</div>' + '</div>';
  }
  document.getElementById('keyvalues').innerHTML = keyValuePairs;
  // zeigt die Anzahl der Notizen Summe als Zahl
  document.getElementById('num_keyvalues').innerHTML = '(Number ' + localStorage.length + ')';
}

//zeigt alle gespeicherten键值paan
函数showStorage（）{
var keyValuePairs=''；
for（本地存储中的var键）{
如果（！localStorage.hasOwnProperty（key））继续；
keyValuePairs+=''+''+键+''+''+'''+'''+''''''+'''+
''+localStorage.getItem（键）+''+''；
}
document.getElementById（'keyvalues'）。innerHTML=keyValuePairs；
//我的名字叫扎尔
document.getElementById（'num_keyvalues'）.innerHTML='（Number'+localStorage.length+'）；
}

---

另外，您只需要使用nameField而不使用valueField调用localStorage.removietem。

您如何在

localStorage

中存储数据？您的代码似乎对使用

value

键保存在

localStorage

中的信息感兴趣，但在代码的else分支中，您迭代了所有键您可能需要使用

localStorage.removietem

来进行完全删除。不仅要将其设置为空白或清空HI，是的，数据是用值键存储的。到目前为止，这是有效的，但我想隐藏html端的空值键字段。只有在存储任何数据时，才会显示这些字段。您能告诉我，我使用的是什么吗要更改吗？我的“便笺删除”按钮是用localStorage.removietem（nameField.value）和localStorage.removietem（valueField.value）设置的。如果我按下按钮，便笺将被删除。localStorage.clear对所有便笺都有效，但我仍然在我的HTML站点上获得这些字段。我只是尝试了

localStorage.setItem（'test'，'abc'））

然后是

localStorage.removietem（'test'）

，它可以按预期工作。也许你可以发布更多的代码。还有你使用的浏览器？非常感谢，这正是我搜索到的-

localStorage.hasOwnProperty（key））continue；

现在一切正常了。

// zeigt alle gespeicherten Key-Value-Paare an 
function showStorage() {
  var keyValuePairs = '';
  for (var key in localStorage) {
    if (! localStorage.hasOwnProperty(key)) continue;
    keyValuePairs += '<div class="notizeintrag" id="notiz" draggable="true">' + '<div class="notizheader" id="header" draggable="true">' + key + '</div>' + '<div class="img" draggable="true">' + '<img src="note-small.png" draggable="true"/>' + '</div>' +
      '<div class="notiz">' + localStorage.getItem(key) + '</div>' + '</div>';
  }
  document.getElementById('keyvalues').innerHTML = keyValuePairs;
  // zeigt die Anzahl der Notizen Summe als Zahl
  document.getElementById('num_keyvalues').innerHTML = '(Number ' + localStorage.length + ')';
}