Error when saving value to localStorage

Error when saving value to localStorage

Hi there,

I'm trying to save and read but when I try to save the value of button in the panel, I get error - Unable to set property 'adl' of undefined or null reference. I have never used localStorage before. Can someone help me locate the error?

Tried running this code in IE11, Firefox and Chrome. adl is just a key.

Thanks

Joe

Here is my code:

  1. <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-2.1.3.min.js" data-semver="2.1.3" data-require="jquery"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script> $(document).ready(function() { // Save settings $( "#myPanel" ).panel({ beforeopen: function( event, ui ) {} }); $( "#myPanel" ).on( "panelbeforeopen", function( event, ui ) {} ); $( "#myPanel" ).panel({ close: function( event, ui ) {} }); $( "#myPanel" ).on( "panelclose", function( event, ui ) { //localStorage.adl = $("#checkbox-h-2a").is(":checked"); //$('#checkbox-h-2a').val(); if (typeof(Storage) !== "undefined") { localStorage.adl = $("#checkbox-h-2a").is(":checked"); console.log($("#checkbox-h-2a").is(":checked")); } }); }); </script> </head> <body> <!-- Start of first page --> <div data-role="page" id="home"> <div data-role="panel" id="myPanel" data-display="overlay"> <!-- panel content goes here --> <fieldset data-role="controlgroup" data-type="horizontal"> <input name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox"> <label for="checkbox-h-2a">Auto Detect Location</label> </fieldset> </div><!-- /panel --> <div data-role="header"> <h1>Test</h1> <a href="#myPanel" data-icon="gear" class="ui-btn-right">Open Panel</a> </div><!-- /header --> <div data-role="content"> <div data-role="main" class="ui-content"> <p>content will go here</p> </div> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- end of first page --> </body> </html>