Скрыть поля div на выходе HTML, если локальное хранилище пусто

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

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

Также вам нужно вызвать только localStorage.removeItem с nameField. а не со значением valueField.

Answer 2

@ Wonkledge Я попробовал этот метод с приложенным кодом, но если я это сделаю, я больше не смогу сохранять или восстанавливать данные в LocalStorage. Но Коробки ушли в построенную страницу HTML. Это почти то, что я хочу. Конечно, только локальное хранилище должно работать. ;)

function showStorage() {
                var keyValuePairs = '';
                for(var key in localStorage) {
                if (localStorage.getItem(key) !== null) {
                 document.getElementById('num_keyvalues').innerHTML = '(Number ' + localStorage.length + ')';
                 }
                else[{                  
                    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 + ')';
                }
            }

Answer 3

действительно не элегантный способ справиться с вашей проблемой, но вы получите желаемое поведение

    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>';
        }