Jquery cookies for my hole website

Question

I am trying to do cookies for the first time. I want to simple increase a font size and save it in a cookie. I did a lot of reading but i could not fount a simple thing. i want a cookie to set the fontsize on the hole website. code below.

<script type="text/javascript">
  $(document).ready(function() {
    $('#incfont').click(function() {
      curSize = parseInt($('.content').css('font-size')) + 2;
      if (curSize <= 20)
        $('.content').css('font-size', curSize);
      $.cookie('font-size', curSize);
      console.log($.cookie('font-size', curSize, {
        expires: 3600
      }));
    });
    $('#decfont').click(function() {
      curSize = parseInt($('.content').css('font-size')) - 2;
      if (curSize >= 12)
        $('.content').css('font-size', curSize);
      $.cookie('font-size', curSize, {
        expires: 3600
      });
      console.log($.cookie('font-size', curSize));
    });
  });

</script>
<div id="incfont" class="col-md-1">
  A
</div>
<div id="decfont" class="col-md-1">
  a
</div>

and to set the font size if you come back to the page:

<script>
  $(document).ready(function() {
    $('.content').css('font-size', $.cookie('font-size'));
  })
</script>

but now what is happening is that it sets a cookie for each page. what i want is to set the font size for my hole website.

I also read something about cross site scripting what do i need to keep in mind?

Thanks for any awnsers,

Cees

Answer 1

I am assuming that you are using this jQuery plugin (https://github.com/carhartl/jquery-cookie).

By default, cookies are only valid on the current page. To override this behaviour you can pass through a path value in the options object.

As you want the cookie to be valid for the entire domain, your path would be /:

$.cookie('font-size', curSize, { path: '/' });

Answer 2

You should specify a cookie path while setting a cookie, I believe that's the case as you're setting it now for every page individually. Simply change you code to set a cookie to this:

$.cookie('font-size', curSize, { path: '/' });