列表的 HTML5 会话存储

Question

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

不知道我做错了什么。

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>

小提琴

Answer 1

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

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

将读取列表中第一个链接的title属性。 但这不是你想要的价值。 该值将始终为“一月”，它将破坏列表其余部分的值（如注释中的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。 所以你也可以看到它在这个 JSFiddle 上工作。

 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>