HTML5 存储 ul 列表？

Question

我无法弄清楚如何为列表项使用会话存储。这似乎不起作用，并且由于样式的原因，我无法使用基本的 select/option:

<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

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

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

使用 localStorage.getItem("country").

签入控制台

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

Answer 2

您正在尝试在 ul 标签中使用 val，但它没有 value 属性.

此外，您正尝试在其上使用 change 事件，但它也没有该事件。

首先，你必须明白你在那里做什么。您可能从其他地方复制了这个 Dropdown Picker，但您不明白它在做什么。

它通过在 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());
});

我更新了 your fiddle with the code working。

HTML5 存储 ul 列表？

HTML5 storage for ul list?

html

javascript

jquery

session-storage