Показать сохраненные локальные ключи хранилища в div / таблице - PullRequest
Новая
       14

Показать сохраненные локальные ключи хранилища в div / таблице

0 голосов
/ 21 января 2012

Я посмотрел вверх и вниз и нашел несколько ссылок на восстановление пар ключ-значение localstorage и их отображение в таблицах / divs / lists / etc, но мне не повезло с моей стороны.

Мне удалось сохранить пары ключ-значение в виде строки из полей ввода формы в localalstorage с помощью json-stringify, и я подтвердил это с помощью веб-инспектора / просмотра ресурсов safari.

Моя проблема заключается в отображении представления пары ключ-значение в таблице / div / list, чтобы пользователь мог щелкнуть по сохраненному ключу и перезагрузить значения в форму. Сохраненные ключи не будут загружаться в div при updateJobsList(), но консоль не выдает ошибок, поэтому должно быть что-то совершенно неправильное.

Ниже приведен пример кода из моего файла js. 

function updateJobsList() {
var jobs = localStorage.length
var s = '<h2>Jobs</h2>';
s+= '<ul>';
for (var i=0;i<jobs;i++) {
  var jobName = localStorage.key(i);
  s+= '<li>'+
      '<div style="float:right;">'+
      '<input type="button" value="Load" onclick="readLocal(\''+jobName+'\');"/'+'> '+
      '<input type="button" value="Delete" onclick="deleteLocal(\''+jobName+'\');"/'+'> '+
      '</div>'+
      '<strong>'+jobName+'</strong>'+
      '</li>';
  }
  $('jobs').innerHTML = s+'</ul>';
}

Ответы [ 2 ]

0 голосов
/ 21 января 2012

Вы пытаетесь перебрать localStorage как итеративный массив, но значения в localStorage хранятся в виде ассоциативного массива, используя пары имя / значение. Метод зацикливания объекта или ассоциативного массива немного отличается: 



    var storage = window.localStorage;
    for (var key in storage) {
        var jobName= storage[key]);
        // execute the rest of your code
    }

Правильно, так что это позволяет вам получить доступ к значениям объекта, но вам все равно нужно вставить ваш HTML (хранящийся в вашей переменной "s") в DOM. Сначала определите элемент в вашем HTML и укажите идентификатор: 



<div id="jobsList"></div>

Затем, если вы используете jQuery, вы бы заполнили элемент html следующим образом: 



$("#jobsList").html(s);
0 голосов
/ 21 января 2012 
$(jobs).html();

- это то, что вы ищете, если вы используете jQuery.также убедитесь, что вы экранировали jobName, если он содержит одинарные или двойные кавычки

...