javascript - 如果本地存储为空，则隐藏 HTML 输出上的 div 字段

Question

我遇到了问题，不知道该怎么办。如果我将某些内容保存到本地存储，存储会显示正常。但是，如果本地存储为空，空字段就会显示在我的 HTML 页面上。如果本地存储为空，我该如何隐藏这些字段？请问有人可以帮助我吗？抱歉，我对这种情况的了解不是很好。

数据以值键存储。到目前为止，这有效，但我想隐藏 HTML 页面上的空值键字段。仅当存储了任何数据时，它们才应该显示。

现在，我尝试隐藏空字段(长度、键、getItem 等)，但它不起作用:

function showStorage() {                
    if (localStorage.getItem('value') !== null) {
        // zeigt die Anzahl der Notizen Summe als Zahl
        document.getElementById('num_keyvalues').innerHTML = '(Number ' + localStorage.length + ')';
    } else {
        var keyValuePairs = '';
        for(var key in localStorage) {
            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;                 
    }
}

Answer 1

您应该使用 .hasOwnProperty 过滤键，您看到的字段是来自 localStorage 原型(prototype)对象的方法和属性

// 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 + ')';
}

此外，您只需要使用 nameField 调用 localStorage.removeItem，而不是使用 valueField。