刷新页面时Jquery重置

Question

I have a site that you can specify which items on the page that should be shown using this jquery:

$('.container h1 a').click(function () {
    $('.container').not($(this).parents()).hide();
    $(this).css({'text-decoration' : 'none',
                'cursor' : 'default'                    
                });
});

But then when I refresh the page the jquery functions that took place are removed

Answer 1

Javascript works on the client side, thanks to the browser. It can modify the current page, but any change will be erased as soon as you reload the page (you get its original content from the server). If you need to restore those changes as "user preferences", use PHP cookies to store information about how each user changes his interface. This way, when you reload the page next time, you can execute the required Javascript functions to restore the user's view.

You could use Ajax to store the user preferences from Javascript, asynchronously.

http://www.w3schools.com/ajax/ Here is W3Schools' Ajax tutorial, you should learn about it. When a user changes his preferences on your page, remember it using a PHP cookie ( http://php.net/manual/en/features.cookies.php ). When the page is reloaded, check the cookie's content, and execute necessary Javascript functions to restore the user's interface.

Edit : Didn't know about http://www.electrictoolbox.com/jquery-cookies/ which allows you to store a cookie from jQuery without using Ajax and additional PHP scripts. Lars Ebert's solution could be lighter indeed, but the general idea is the same.

Answer 2

The css-properties are only modified temporarily. They are not permanent and are gone when you refresh the page. To remember the hidden elements, you would have to use a cookie. You can use this jQuery-plugin to store a cookie.

In this cookie, you can store the id of the hidden element each time the user clicks to hide one element. On page-load, you simply read the cookie and re-hide the elements the user has hidden!