jQuery cookie plugin - set and retrieve on reload

Question

I have a set of checkboxes and I can't figure out how to create a cookie to remember which one of them has been checked on page reload. I am aware of jQuery cookie plugin but cookies, in general, is something I have no experience with whatsoever.Can anyone help me and show me how to approach this, please?

 <form>
        <div>
            <input type="checkbox" id="checkAll" checked>
            <label for="checkAll" class="label-header">Check All</label>                 
        </div>
     <div>               
            <input type="checkbox" id="check1" checked>
            <label for="option1">Option 1</label>
        </div>
        <div>                
         <input type="checkbox" id="check2" checked>
            <label for="option2">Option 2</label>
        </div>
        <div>                
            <input type="checkbox" id="check3" checked>
            <label for="option3">Option 3</label>
        </div>      
    </form>

check out http://stackoverflow.com/questions/1458724/how-do-i-set-unset-cookie-with-jquery — Takarii, Sep 14 '16 at 10:29
I stumbled over this @Takarii. I think I struggle with the very basics. Do I need to have the site uploaded on the server to be able to see cookies in the developers tools and retrieve changes? — Miraso, Sep 14 '16 at 15:52

score 1 · Answer 1 · edited May 23 '17 at 11:55

Create a cookie with the default values when your page loads.
Update the cookie's settings when the checkboxes change (onchange).

For example:

In your document.ready:

Cookies.set('site_currency', currency, { expires: 7, path: '/' });

and in your change event:

Cookies.remove('site_currency', { path: '/' });
Cookies.set('site_currency', currency, { expires: 7, path: '/' });

This has been answered many times on stackoverflow, with my favorite page full of many suggestions and examples: How do I set/unset cookie ...?

jQuery cookie plugin - set and retrieve on reload

1 Answers1