Set cookie not working with Javascript or jQuery

Question

my problem is that to set a cookie by click on a button is not working. I've tested it on 3 different ways.

HTML:

<!DOCTYPE html>
<html dir="ltr">
    <head> [...]
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
        <script src="/cookies/js/jquery.cookie.js"></script>
        <script>
            document.getElementById('btnSetCookie').onclick = function () {
                $.cookie('cookie-1', 'true');
                alert('You have set the cookie: ' + jQuery.cookie('cookie-1'));
            });
            $(function () {
                $("#btnSetCookie").click(function () {
                    jQuery.cookie('cookie-2', 'true');
                    alert('You have set the cookie: ' + jQuery.cookie('cookie-2'));
                });
            });
            $(document).ready(function () {
                $("#btnSetCookie").on('click', function () {
                    $.cookie('cookie-3', 'true');
                    alert('You have set the cookie: ' + jQuery.cookie('cookie-3'));
                });
            });
        </script>
    </head>
    <body> [...]
        <button id="btnSetCookie">set cookie</button> [...]
    </body>
</html>

Any idea what's my mistake?

Are you loading the page from a web server or from file system? And why THREE event handlers at the same time? AND TWO different ways to acces jQuery. The first will not work since the button does not exist at the time of the script. Please look in the console (press F12) — mplungjan
– mplungjan, Commented Mar 2, 2018 at 13:37
What errors are in your browser's console? I suspect that you need to set the protocol http(s): for the jQuery library - I found I needed to do this (depending on the browser). And the first version won't work because the element is not yet available on the page. — Andy G
– Andy G, Commented Mar 2, 2018 at 13:39

jme11 · Accepted Answer · 2018-03-02 16:28:09Z

1

The reason this is not working for you is that you cannot set cookies if you're not running on a server. In other words, if you're serving the file in a browser locally using file://, it simply won't work.

Both your second and third option run fine. I would clean them both up and use either $ or jQuery consistently, but both work when running on a server.

Here's a demo of your code working.

$(document).ready(function () {
  $("#btnSetCookie").on('click', function () {
    $.cookie('cookie-3', 'true');
    alert('You have set the cookie: ' + $.cookie('cookie-3'));
  });
});

You could also consider using a more up-to-date version of jQuery, as well as the plugin you're using (the version you're using is no longer maintained). In fact, the newer version of the plugin is no longer dependent upon jQuery at all.

answered Mar 2, 2018 at 16:28

jme11

17.9k2 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set cookie not working with Javascript or jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related