HTML5 Session Storage for list

Question

How would I define sessionStorage for a dropdown list? I have the following, but I get "someTitle is not defined"

Not sure what I'm doing wrong.

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

In the code, you are reading the incorrect data. This:

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

will read the title attribute for the first link in the list. But that's not the value that you want. That value will always be "January" and it will corrupt the values of the rest of the list (as specified by metal03326 in the comments).

What you want to read (and set) is the value of the first span in the button, as that is the selected value. To do that, you need to change the selector a little:

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

That will read the selected value correctly. Now to set it again when the new page loads, you need to modify that span too:

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

---

You can see the whole code here, but it won't work as it doesn't support sessionStorage while on sandbox mode. So 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>