Cookie based Redirection using Javascript

Question

I'm attempting to create a redirect based on a cookie existence. So when a user connects to my website jonathanstevens.org for the first time, they are redirected to jonathanstevens.org/landing

Code parts:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Global.js

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

function get_cookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1, c.length);
        }
        if (c.indexOf(nameEQ) === 0) {
            return c.substring(nameEQ.length, c.length);
        }
    }
    return null;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Index.html

<!-- redirect to landing page -->
<script>
  // Redirect to landing page if 'form_submitted' cookie does not exist
  if (get_cookie('secondvisit') === 'undefined') {
    window.location.href = "landing.html";
  }
</script>

landing.html

<!-- Adds second Visit cookie -->
<script>
	jQuery(document).ready(function($) {
    // Create cookie so that the user is no longer redirected
    create_cookie('secondvisit', 'true', 30);
	});
</script>

The expected result was it to check for a cookie, then forward me to my landing page if it wasn't defined. Any ideas on what I've done wrong?

Muhammad Omer Aslam · Accepted Answer · 2017-12-07 19:17:48Z

2

You should compare with null instead of undefined as you are returning null from the function get_cookie

Index.html

<!-- redirect to landing page -->
<script>
  // Redirect to landing page if 'form_submitted' cookie does not exist
  if (get_cookie('secondvisit') === null) {
    window.location.href = "landing.html";
  }
</script>

Apart from this you should use this library really good one an easy to work with see below

Create a cookie, valid across the entire site:

Cookies.set('name', 'value');

Create a cookie that expires 7 days from now, valid across the entire site:

Cookies.set('name', 'value', { expires: 7 });

Create an expiring cookie, valid to the path of the current page:

Cookies.set('name', 'value', { expires: 7, path: '' });

Read cookie:

Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined

Read all visible cookies:

Cookies.get(); // => { name: 'value' }

Delete cookie:

Cookies.remove('name');

Delete a cookie valid to the path of the current page:

Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!

EDIT

A converted version of your code using js.cookie library will look like following.

(Note: i have tested this code and it works correctly, make sure you are including the library correctly and there are no errors on the console.)

Index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<!-- redirect to landing page -->
<script>
    $(document).ready(function () {
        if (typeof Cookies.get('secondvisit') === 'undefined') {
            window.location.href = "landing.html";
        }
    })
    // Redirect to landing page if 'form_submitted' cookie does not exist
</script>

landing.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<!-- Adds second Visit cookie -->
<script>
    jQuery(document).ready(function () {
        // Create cookie so that the user is no longer redirected
        var a = Cookies.set('secondvisit', 'true', {
            expires: 7
        });
    });
</script>

edited Dec 7, 2017 at 19:17

answered Dec 7, 2017 at 2:12

Muhammad Omer Aslam

23.9k9 gold badges47 silver badges69 bronze badges

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

6 Comments

Jonathan Stevens Over a year ago

Thanks. This has got the redirection working. However when page "landing" loads, it does not create a cookie. So when I click back onto index.html it redirects me again. (I am working local on chrome). <script> jQuery(document).ready(function($) { cookies.set('secondvisit', 'true'); }); </script> I have also included the library you suggested.

Muhammad Omer Aslam Over a year ago

i am out at the moment will reach back home and see what i can do to sort it out.

Muhammad Omer Aslam Over a year ago

apart from all it is Cookies.set() not cookies.set() so that may be the reason it wasnt working for you, i have added the code above. @JonathanStevens

Jonathan Stevens Over a year ago

Does this work on my local file system or will I have to upload it. If so, maybe that's the issue...

Woody Over a year ago

Excellent information I have looking for, thank you.

|

Collectives™ on Stack Overflow

Cookie based Redirection using Javascript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related