Javascript execution order: will cookies always be set before redirect?

Question

When a user clicks a button, I create 4 cookies before sending him to the next page:

$('button').on('click', function() {
    create_cookie('cookie1', 'value1', 30);
    create_cookie('cookie2', 'value2', 30);
    create_cookie('cookie3', 'value3', 30);
    create_cookie('cookie4', 'value4', 30);
    window.location = 'nextpage/';
});

with create_cookie:

function create_cookie(name, value, lifetime) {
    var date = new Date();
    date.setTime(date.getTime() + (lifetime * 24 * 60 * 60 * 1000)); 
    var expires = "; expires=" + date.toGMTString();
    document.cookie = name + "=" + value + expires + "; path=/";
}

My question: am I sure that, using this approach, the cookies are set before the redirect? Or can it be that in some rare cases the cookies aren't set on time and the redirect already kicks in, resulting in a page load without the proper cookies? Given that the users' browser is set to accept cookies, of course.

Never had any issues myself, but in my error logs, I see that sometimes (although it's rare), the cookie isn't set on the next page for some users. This could of course be because the user visits the redirect page directly, and I could redirect them if the cookie is not set properly, but I want to be sure that the approach above is solid to avoid that users click the button and instantly get redirected to an error page because the cookie wasn't set properly.

Thanks a lot in advance!

yes, because javascript executes one statement at a time in order (I'd say single threaded, but that's not technically right) — Jaromanda X, Aug 28 '19 at 06:53

Abana Clara · Answer 1 · 2019-08-28T07:16:37.897

but I want to be sure that the approach above is solid to avoid that users click the button and instantly get redirected to an error page because the cookie wasn't set properly.

You can block redirect if the cookies do not exist. Create a function that extracts the cookies and check if they exist.

Taking the function from this answer:

function get_cookie(cookiename) 
{
  var cookiestring=RegExp(""+cookiename+"[^;]+").exec(document.cookie);
  return decodeURIComponent(!!cookiestring ? cookiestring.toString().replace(/^[^=]+./,"") : "");  
}

Then set an if statement

$('button').on('click', function() {
    create_cookie('cookie1', 'value1', 30);
    create_cookie('cookie2', 'value2', 30);
    create_cookie('cookie3', 'value3', 30);
    create_cookie('cookie4', 'value4', 30);

    if(get_cookie('cookie1') && 
       get_cookie('cookie2') && 
       get_cookie('cookie3') && 
       get_cookie('cookie4')
      ) { window.location.href = 'nextpage' }

});

You can write a function to periodically keep checking the cookies and then redirect if all are existing, but since @JaromandaX specifically mentioned that the cookies will be set before the subsequent lines run, I don't think this is necessary. But you can try if you can replicate the below issue:

I see that sometimes (although it's rare), the cookie isn't set on the next page for some users.

You can use a recursive timeout to do so:

function check_cookies(cookienames, callback){
  setTimeout(function(){
     var ok = cookienames.every(function(c){
       return get_cookie(c);
     });

     if(ok) callback();
     else check_cookies(cookienames, callback);
  }, 1000);
}

$('button').on('click', function() {
    create_cookie('cookie1', 'value1', 30);
    create_cookie('cookie2', 'value2', 30);
    create_cookie('cookie3', 'value3', 30);
    create_cookie('cookie4', 'value4', 30);

    var cookie_arr = ['cookie1', 'cookie2', 'cookie3', 'cookie4'];
    check_cookies(cookie_arr, function(){ window.location.href = 'nextpage' })

});

Javascript execution order: will cookies always be set before redirect?

1 Answers1