Jquery keeps the selected tabs on each page if the page is refreshed


i have this HTML Code:

<div class="tab-box">
        <a href="javascript:;" class="tabLink activeLink" id="tab1">Tab1</a>
        <a href="javascript:;" class="tabLink" id="tab2">Tab2</a>
        <a href="javascript:;" class="tabLink" id="tab3">Tab3</a>
        <a href="javascript:;" class="tabLink" id="tab4">Tab4</a>

this lists the tabs...

then each tab is like:

<div class="tabcontent" id="tab1-1">
tab1 content

<div class="tabcontent hide" id="tab2-1">
tab1 content

<div class="tabcontent hide" id="tab3-1">
tab1 content

<div class="tabcontent hide" id="tab4-1">
tab1 content

then the jquery code:

$(document).ready(function() {
        localStorage.selectedTab = $(this).index() + 1;
        tabeId = $(this).attr('id');
        return false;

    // search for local storage
    if (localStorage.selectedTab) {
      $(".tabLink:eq(" + (localStorage.selectedTab - 1) + ")").click();

the jquery above, i have tried to make it so it remembers the last tab selected if the page is refreshed. however, this only works with one page. if i change to view a different page with tabs, it selects a random tab as i cannot find the last one selected because it was on a different page with a different name.

how can i make it remember the last selected tab for each page?

What about cookies?

document.cookie = "tabId=" + tabeId;

then check it:

tabId = document.cookie