jQuery单选按钮页面刷新时检查值

Question

I have the following two radio buttons. Switching between the two values works. But after a page refresh the selected value is not there anymore. How can I handle this problem. Is there a jquery library which can handle this? Any solutions which works on each browser? Thanks for suggestions.

 <input type="radio" name="lr" id="open" class="required" value="open to all" checked="checked" />   

 <input type="radio" name="lr" id="login_area"  class="required myOption" value="login_area" /> 
 <label for="login_area">Register</label>

 <div class="login_area">...</div>
 <div class="signUp_area">...</div>

 $(document).ready(function() {
    $('.myOption').click(function() {
      var $stat = null;
        $stat = $('#login_area')[0].checked;
        if ($stat === true) {
            $('.signUp_area').show();
            $('.login_area').hide();
        } else {
            $('.login_area').show();
            $('.signUp_area').hide();
        }
    });
});

Answer 1

JavaScript is stateless. You have to either use localStorage, cookies, or a server session to persist after a page refresh. Client side code does not do this unless stored in memory or a database.

Answer 2

Should you use jquery cookie.

To set:

$.cookie("var", "10");

To get:

$.cookie("var");

To delete:

$.cookie("var", null);