Use Jquery to update a PHP session variable when a link is clicked

Question

I have several divs that a user can Minimize or Expand using the jquery toggle mothod. However, when the page is refreshed the Divs go back to their default state. Is their a way to have browser remember the last state of the div?

For example, if I expand a div with an ID of "my_div", then click on something else on the page, then come back to the original page, I want "my_div" to remain expanded.

I was thinking it would be possible to use session variables for this, perhaps when the user clicks on the expand/minimize button a AJAX request can be sent and toggle a session variable...IDK..any ideas?

Answer 1

There's no need for an ajax request, just store the information in a cookie or in the localstorage. Here's a library which should help you out: http://www.jstorage.info/

Some sample code (untested):

// stores the toggled position
$('#my_div').click(function() {
    $('#my_div').toggle();
    $.jStorage.set('my_div', $('#my_div:visible').length);
});

// on page load restores all elements to old position
$(function() {
    var elems = $.jStorage.index();
    for (var i = 0, l = elems.length; i < l; i++) {
        $.jStorage.get(i) ? $('#' + i).show() : hide();
    }
});