Question

I am having rather a bother trying to bind setting a localstorage key to a modal close dialog. I have found several great articles detailing the methods to hook into the closedialog as well as setting a local storage key. However, none of the articles found detailed the precise issue I am attempting to sort.

What I am attempting to accomplish is to fist check that the browser supports localstorage, if so then check to see if a localstorage key already exists, if a key exists then remove the modal object from the DOM, else, set a localstorage key on the user clicking the modal close dialog.

Here is what I have come up with so far:

$(document).ready(function() {
  if('localStorage' in window) && window['localStorage'] !== null){
    var key = 'test';
    if(localStorage.getItem(key) !== null){
      $('#mainform').remove('');
    }
    else {
      if $('#mainform).bind('dialogclose', function(event, ui) {
        $('#mainform').localStorage.setItem(key, on);
      }
    }
  }
});​

Answer 1

$(function() {
    $('#mainform').on('dialogclose', function(event, ui) {
        if ('localStorage' in window) {
            if ( localStorage.getItem('test') ){
                $(this).remove();
            } else {
                localStorage.setItem('test', true);
            }
        }
    });
});​

MDN has a polyfill for localStorage so it would automatically fall back to cookies.