列表的 HTML5 会话存储答案

【问题标题】：HTML5 Session Storage for list列表的 HTML5 会话存储
【发布时间】：2015-09-18 22:33:22
【问题描述】：

如何为下拉列表定义 sessionStorage？我有以下内容，但我得到“someTitle is not defined”

不知道我做错了什么。

Javascript

function save_page(form) {
    if (supports_html5_storage()) {
        var title = $('.btn-group-month ul li > a').attr('title');
        sessionStorage.setItem("someTitle", title);
    }
}

function load_page(form) {
    if (supports_html5_storage()) {
        var title = sessionStorage.getItem("someTitle");
        $('.btn-group-month ul li > a').attr('title', title);
    }
}

html

<div class="btn-group btn-group-month">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span data-bind="label">Month</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-month">
    <li><a href="#" title="January">January</a></li>
    <li><a href="#" title="February">February</a></li>
    <li><a href="#" title="March">March</a></li>
  </ul>
</div>

fiddle

【问题讨论】：

我将代码复制粘贴到本地服务器中，但似乎没有抛出任何错误。但它似乎并没有做任何有用的事情——save_page 总是保存一月，而 load_page 会破坏所有月份的 title="January"。你能解释一下你想做什么吗？
好的，感谢您的回复。我正在尝试将所选项目保存到 sessionStorage 以便它可以保留到新页面。因此，如果用户选择二月，则将其保存在存储中，并传递到新页面。显然我的代码在这两个地方都有问题，但我不确定是什么。
好的，看看 HTML，这看起来像 Bootstrap - 是吗？我查看了 Bootstrap 的文档，但找不到看起来像下拉菜单的组件，并且在单击时实际上会更改值。您如何在视觉上进行更改，所以我知道要寻找什么。现在，使用提供的 HTML，没有选定的项目或任何东西——我不知道在保存和加载时要查找的项目——在哪里以及如何显示选定的项目。您能否仅提供选定内容时的 HTML？
函数中form参数有什么用？此外， $('.btn-group-month ul li > a').attr('title') 将采用您的第一个主播的标题，而不是选择的标题。您应该调用函数 onchange 以便获得该月的值
@metal03326 是的，我正在使用 Bootstrap。我将在几秒钟内添加一个带有 Bootstrap 内容和更多 JS 的 jsfiddle。谢谢。

标签： javascript html session-storage

【解决方案1】：

在代码中，您正在读取不正确的数据。这个：

var title = $('.btn-group-month ul li > a').attr('title');

将读取列表中第一个链接的title 属性。但这不是您想要的价值。该值将始终为“January”，它将破坏列表其余部分的值（由 cmets 中的 metal03326 指定）。

您要读取（和设置）的是按钮中第一个span 的值，因为这是选定的值。为此，您需要稍微更改选择器：

var title = $('.btn-group-month button > span:first()').text();

这将正确读取所选值。现在要在新页面加载时再次设置它，您还需要修改 span：

var title = sessionStorage.getItem("someTitle");
if (title) {
    $('.btn-group-month button > span:first()').text(title);
}

您可以在此处查看整个代码，但它无法工作，因为它在沙盒模式下不支持 sessionStorage。所以you can see it working on this JSFiddle too。

function supports_html5_storage() {
  try {
    return 'sessionStorage' in window && window['sessionStorage'] !== null;
  } catch (e) {
    return false;
  }
}

function save_page(form) {
  if (supports_html5_storage()) {

    var storage = window.sessionStorage;

    // AM - new selector
    var title = $('.btn-group-month button > span:first()').text();
    sessionStorage.setItem("someTitle", title);

    form.filter(':input').each(function(ind,elem) {
      if (elem.name && elem.value) {
        storage.setItem(elem.name,elem.value);
      }
      else {
        //storage.someTitle=$('ul.dropdown-menu-month li').find('a').attr('title');
      }
    });
  } else {
    alert("HTML5 storage not available");
  }
}

function load_page(form)
{
  if (supports_html5_storage()) {

    var title = sessionStorage.getItem("someTitle");
    // AM - new selector
    if (title) {
      $('.btn-group-month button > span:first()').text(title);
    }

    var storage = window.sessionStorage;

    form.filter(':input').each(function(ind,elem) {
      if (elem.name) {
        $('.edit-image-container img.img-verify').attr('src',storage.galleryImg);
        elem.value = storage.getItem(elem.name);
      } else {
        //
      }
    });
  }
}


// Enable dropdown to display chosen value
$('.dropdown-menu li').click(function(){
  var elementVal = $(this).text();

  $(this).closest('.input-append').find('#appendedInputButton').val(elementVal);
});


// Dropdown picker
$('.dropdown-menu').on( 'click', 'li', function( event ) {
  var $target = $( event.currentTarget );
  $target.closest( '.btn-group' )
  .find( '[data-bind="label"]' ).text( $target.text() )
  .end()
  .children( '.dropdown-toggle' ).dropdown( 'toggle' );

  // AM - Save form
  save_page($("form"));

  return false;
});

// AM - Load form
load_page($("form"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<form>
  <div class="btn-group btn-group-month">
    <button type="button" name="dropdownval" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span data-bind="label">Month</span><span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-month" name="month">
      <li><a href="#" title="January">January</a></li>
      <li><a href="#" title="February">February</a></li>
      <li><a href="#" title="March">March</a></li>
    </ul>
  </div>
</form>

【讨论】：