Хранилище HTML5 для списка ul?

Question

У меня возникли проблемы с определением использования хранилища сеансов для элементов списка. Это, кажется, не работает, и из-за стиля, я не могу использовать основной выбор/вариант:

<div class="btn-group"> 
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span data-bind="label">Day</span><span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu" name="country"> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
</ul> 

var item = window.localStorage.getItem('country'); 
$('ul[name=country]').val(item); 

$('ul[name=country]').change(function() { 
    window.localStorage.setItem('country', $(this).val()); 
}); 

fiddle

Answer 1

Вы пытаетесь использовать val в ul тега, и он не имеет value свойство.

Кроме того, вы пытаетесь использовать событие change на нем, и оно также не имеет этого события.

Во-первых, вы должны понять, что вы там делаете. Вероятно, вы скопировали этот Dropdown Picker из любого места, и вы не понимаете, что он делает.

Это имитируя select поведение с помощью label внутри button, и при любом li внутри ul тега щелкнул, ваш код изменяет label текста ОДНОМ li «s.

Итак, во-первых, когда ваша страница загружена, вы должны увидеть, что-либо уже есть в вашем локальном хранилище, и если это так, вы должны изменить текст метки на значение, сохраненное в localStorage.

var item = localStorage.getItem('country'); 
if (item) $('span[data-bind="label"]').text(item); 

После этого, в вашем li «клика события с, вы должны сохранить щелкнули li» s текста в LocalStorage для сохраняющихся целей позже.

// Dropdown picker 
$('.dropdown-menu').on('click', 'li', function(e) { 
    var $target = $(e.currentTarget); 
    /* the rest of your code */ 
    localStorage.setItem('country', $target.text()); 
}); 

Я обновил your fiddle with the code working.

Answer 2

Это основное событие click() , Вы не должны использовать change():

$('ul[name=country] li').click(function() { 
    window.localStorage.setItem('country', $(this).text()); 
}); 

Проверьте в консоли, используя localStorage.getItem("country").

Fiddle: https://jsfiddle.net/5z0nkdjb/