javascript - 列表的 HTML5 session 存储

Question

如何为下拉列表定义 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

Answer 1

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

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

将读取列表中第一个链接的 title 属性。但这不是您想要的值。该值将始终为“January”，并且会破坏列表其余部分的值(如评论中的 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>