jquery не скрывает невыбранные вкладки на php-странице, размещенной на сервере xampp

У меня есть следующий PHP-код. Я использовал jquery для создания вкладок. Но jquery не работает на php-странице. Всякий раз, когда я загружаю php-страницу на localhost с помощью xampp, обе вкладки отображаются. Я искал проблему, но все еще не работал.

<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>jQuery Tabs Demo</title> <style> * {padding:0; margin:0;} html { background:url(/img/tiles/wood.png) 0 0 repeat; padding:15px 15px 0; font-family:sans-serif; font-size:14px; } p, h3 { margin-bottom:15px; } div { padding:10px; width:600px; background:#fff; } .tabs li { list-style:none; display:inline; } .tabs a { padding:5px 10px; display:inline-block; background:#D8D8D8; color:#fff; text-decoration:none; } .tabs a.active { background:#666 ; color:#FFFFFF ; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> // Wait until the DOM has loaded before querying the document $(document).ready(function () { $('ul.tabs').each(function () { var index = "key"; // Define friendly data store name // Start magic! try { alert('i am in try'); // getter: Fetch previous value var oldIndex = parseInt(local.getItem(index)); } catch (e) { alert('im in catch'); // getter: Always default to first tab in error state var oldIndex = 0; } alert('oldIndex' + oldIndex); // For each set of tabs, we want to keep track of // which tab is active and it's associated content var $active, $content, $links = $(this).find('a'); // If the location.hash matches one of the links, use that as the active tab. // If no match is found, use the first link as the initial active tab. $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[oldIndex]); $active.addClass('active'); $content = $($active[0].hash); // Hide the remaining content $links.not($active).each(function () { $(this.hash).hide(); }); // Bind the click event handler $(this).on('click', 'a', function (e) { // Make the old tab inactive. $active.removeClass('active'); $content.hide(); // Update the variables with the new link and content $active = $(this); $content = $(this.hash); // Make the tab active. $active.addClass('active'); $content.show(); if (location.hash == '#details') var newIndex = "1"; else var newIndex = "0"; // Set future value localStorage.setItem(index, newIndex) // Prevent the anchor's default click action }); }); }); </script> </head> <body> <ul class='tabs'> <li><a href="#count" >Count</a></li> <li><a href="#details">Details</a></li> </ul> <div id='count'> <h3>Section 2</h3> <?php include 'C:\xampp\htdocs\Login Page\countpage.php';?> </div> <div id='details'> <h3>Section 3</h3> <p>Suspendisse potenti. Morbi laoreet magna vitae est mollis ultricies. Mauris eget enim ac justo eleifend malesuada. Proin non consectetur est. Integer semper laoreet porta. Praesent facilisis leo nec libero tincidunt blandit.</p> </div> </body> </html> 

Вышеупомянутый код jquery также используется для сохранения на выбранной вкладке после обновления. Код, похоже, не работает. Пожалуйста помоги.

Изменить: я редактировал код, чтобы включить localStorage HTML5. Но localStorage не сохраняет никакой ценности. Из-за этого jquery не может извлекать сохраненные значения из localStorage в блоке try. Пожалуйста, помогите определить проблему.