Удалить элемент из localStorage, который динамически отображается в ‹li›

У меня есть приложение, которое считывает элементы, хранящиеся в localStorage, и отображает их в <li />, когда страница «загружается».

Представление списка содержит кнопку разделения, при нажатии которой соответствующий элемент удаляется из списка; это часть того, к чему я стремлюсь, просматривая Интернет, я пытался найти способ, чтобы эта функция «удалить/удалить» ТАКЖЕ удаляет выбранный элемент внутри <li /> из localStorage, но по какой-то причине мой скрипт ниже кажется, удаляет случайные элементы.

$(document).ready(function () {
        window.addEventListener('load', OnStorage, false);

    });

    function OnStorage(event) {
        if (window.localStorage) {
            var key, value;
            // loop through local storage
            for (var i = 0; i < localStorage.length; i++) {
                // retrieve the key
                key = localStorage.key(i);
                // set the field from the key
                value = localStorage.getItem(key);

                $("#medListDiv").show();
                var text = '<a href="#"><h2>' + value + '</h2>' + '<a href="#" class="del">Delete</a></a>';
                $('<li />', {
                html: text
                }).appendTo('ul.medList');                  
            }
            $('ul.medList').listview('refresh')
        }
    }

    //Deletes items from the medicine List
    $('ul').on('click', '.del', function (el) {
        $(this).closest('li').remove();
        localStorage.removeItem(key); //Where problem relies
        $('ul.medList').listview('refresh');
    });

Я считаю, что это связано с тем, что key является неправильным, но я не могу придумать, как заставить скрипт взять правильный ключ из выбранного элемента. Или если есть способ удалить элемент, взяв только значение? (Сомневаюсь, поскольку все, что я нахожу, можно сделать, только манипулируя ключом).

Пожалуйста, любые предложения будут высоко оценены.


javascript jquery jquery-mobile jquery-mobile-listview
person Scur4    schedule 14.11.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Сохраните свой ключ в атрибуте тега привязки

     var text = '<a href="#"><h2>' + value + '</h2>' + '<a href="#" key="'+key+'" class="del">Delete</a></a>';
            $('<li />', {
            html: text
            }).appendTo('ul.medList');

и в событии клика ссылайтесь на этот атрибут

$('ul').on('click', '.del', function (el) {
    $(this).closest('li').remove();
    var key = $(this).attr('key');
    localStorage.removeItem(key); //Where problem relies
    $('ul.medList').listview('refresh');
});

надеюсь, это решит вашу проблему.

person Gowsikan    schedule 14.11.2013
comment
Благодарю вас! Это, безусловно, помогло, не знаю, почему я не подумал об этом раньше. Должно быть, я переношу простуду :(. Еще раз спасибо! - person Scur4; 14.11.2013

arrow_upward
1
arrow_downward

вы должны получить ключевое значение, где вы выполняете событие click на пользовательском интерфейсе. скажем, каждая ли похожа

<li data='key'>....</li>

// ключ ссылается на имя ключа в локальном хранилище, и при нажатии на функцию вы можете получить значение ключа, например

var key = $(this).closest().attr("data");
localStorage.removeItem(key);
person developerCK    schedule 14.11.2013