HTML5 хранилище для ul list?

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

<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());
});

играть на скрипке

Источник

2 ответа

Решение

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

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

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

Это имитирует select поведение с помощью label внутри buttonи в любое время li внутри ul тэг, ваш код меняет label текст к liодин.

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

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

После этого внутри вашего liсобытие клика, вы должны сохранить liтекст в localStorage для постоянных целей позже.

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

Я обновил вашу скрипку с работающим кодом.

Источник

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

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

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

Скрипка: https://jsfiddle.net/5z0nkdjb/

Источник
Другие вопросы по тегам