HTML5存储的ul列表

HTML5 storage for ul list?

本文关键字：列表 ul 存储 HTML5      更新时间：2023-09-26

我有麻烦弄清楚如何使用会话存储列表项。这似乎不工作，因为样式，我不能使用基本的选择/选项:

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

小提琴

基本的click()事件。你不应该使用change():

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

检查控制台，使用localStorage.getItem("country")。

小提琴:https://jsfiddle.net/5z0nkdjb/

您试图在ul标签中使用val，并且它没有value属性。

另外，你试图在它上使用change事件，它也没有那个事件。

首先，你必须明白你在做什么。你可能从其他地方复制了这个下拉选择器，但你不知道它在做什么。

它通过在button内使用label来模拟select行为，并且任何时候单击ul标记内的li，您的代码将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());
});

我已经更新了你的小提琴与代码工作。

相关文章：