Develop Reference

JavaScript redirect based on presence of cookie

I am trying to set up a system where a cookie is created when ever a user lands on a specific page.
for example:
if a user goes to .com/jp/a3 a cookie is created.
I am using this code to create the cookie and it seems to be creating the cookie on that page.
<script>
document.cookie = "name_of_cookie=a3; expires=31 Dec 2017 12:00:00 UTC; path=/"
</script>
I currently have pages .com/jp/a1 through .com/jp/a3 created. So there is a possibility of three cookies being created.
Upon the user's next visit, I would like the browser to check for these cookies and redirect back to that page when a user visits the normal landing page. If a user has been to multiple pages, I would like the priority to be set to the page they visited first. (this may involve coding some if else statements into my javascript to set the cookie I assume?) If this is difficult, I would be ok with just moving through the a1-a3 list as a1 having the highest priority and a3 the lowest.
I have tried adding the following code to my website.com/index.html file but am not having any luck.
<script>
function getCookie(cname) {
var name = name_of_cookie + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var redirect = getCookie("name_of_cookie");
if (redirect != "") {
window.location = "http://www.website.com/jp/" + redirect;
} else {
window.location = "http://www.website.com/"
}
}
checkCookie();
</script>
One issue I think I may be facing, is that while I am on the a3.com pages, I am able to see the cookie in my storage, however, when I go to my index.html page, I am not able to see the cookie in my storage.
I have set the path to /, will this only make the cookie available in the .com/jp/ subfolder, or should it be accessible on the .com/index.html page?
Thank you in advance for any assistance anyone could provide.

You seem to have the getCookie function defined wrong. when testing it, I got the error name_of_cookie is not defined. It seems that on the first line of your getCookie() function, you used name_of_cookie instead of cname as you defined the parameter getCookie(cname)
All you have to do is change it to
var name = cname + "=";
Also, by specifying the path as / you should be able to see the cookies from your index too.

Simple mistake!
I forgot quotations around name_of_cookie in the second line.
Corrected answer is:
<script>
function getCookie(cname) {
var name = "name_of_cookie" + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var redirect = getCookie("name_of_cookie");
if (redirect != "") {
window.location = "http://www.website.com/jp/" + redirect;
} else {
window.location = "http://www.website.com/"
}
}
checkCookie();
</script>
Thanks for the assistance everyone!

avoiding setting a cookie based on a specific URL string

I am setting up a cookie based on the user first visit on a website. So every time a new user visit the website I am redirecting them to the landing page otherwise the user will see the index page directly (since time time the cookie is already in the user's browser).
Now what I am trying to achieve is that I would like skip the landing page redirect based on a specific URL (for both new users and existing users).
This is how I am checking the new visit and setting up a redirect cookie.
$(document).ready(function() {
landingPageOnFirstVisit();
createCookie('landingRedirect', 'true', '60');
});
function landingPageOnFirstVisit() {
var setCookieForLanding = readCookie('landingRedirect');
if (!setCookieForLanding) {
window.location = "/en/landing";
}
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(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;
}
How do I make sure that if user visit the website directly using the below mentioned URL pattern: the redirection process would not occur and we wont set any cookies.
https://www.domain.com/en/page?usePromo=XXXXXX
(where XXXXXX are numbers and changes everytime)

Try
$(function() {
if (location.href.indexOf("usePromo")==-1) {
landingPageOnFirstVisit();
createCookie('landingRedirect', 'true', '60');
}
});

Read a cookie when implementing inside of another function

I have the following function to change stylesheets on my website that I want to use cookies to keep stylesheet theme persistent across pages.
<script type="text/javascript">
var i=1;
function styleSheet(){
if(i%2==0){
swapper('css/main.css');
document.cookie = "username=Visitor";
}
else{
swapper('css/stylesheetalternate.css');
document.cookie = "username=alternateVisitor";
}
i++;
}
<button onclick="styleSheet()">Click me</button>
I'm already setting my cookies inside of this function. I'm not too interested in setting expiration dates or anything like that, the default is fine for me. What I do want to try doing however is read the cookies inside of this function each time that I use the button I created. Is there no way to read it inside of the same function?
I'm aware that there exists a jquery library that does this, but I don't want to use jquery if I can get a better performance with javascript.
EDIT:
<script type="text/javascript">
var i=1;
function styleSheet(){
if(i%2==0){
swapper('css/main.css');
document.cookie = "username=Visitor";
readCookie(Visitor);
}
else{
swapper('css/stylesheetalternate.css');
document.cookie = "username=alternateVisitor";
readCookie(alternateVisitor);
}
i++;
}
Do you mean something like the following when you say to use readCookie inside of my function? What I notice from this sort of implementation is that after swapping stylesheets once, it is for whatever reason impossible to swap again until the page is reloaded.

Here's a set of plain javascript cookie functions that you can use from any function. So, to your question, you can call readCookie("username") from your function (or read any other cookie value):
// createCookie()
// name and value are strings
// days is the number of days until cookie expiration
// path is optional and should start with a leading "/"
// and can limit which pages on your site can
// read the cookie.
// By default, all pages on the site can read
// the cookie if path is not specified
function createCookie(name, value, days, path) {
var date, expires = "";
path = path || "/";
if (days) {
date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=" + path;
}
function readCookie(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;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}

document.cookies is just a big list of all the cookies. You can parse through it to find the one you're interested in:
function getCookieValue(cookieName) {
var value = null;
document.cookie.split(';')
.forEach(function(pair){
var pairArray = pair.split('=');
if (pairArray[0]==cookieName) {
value = pairArray[1];
}
});
return value;
}
(Untested, let me know how it goes.)

Setting Cookie Expiration time.

I have the following script that is for a popup on my home page. It works well except the cookie seems to reset its self every day. I would like for the cookie to expire as far into the future as possible. My problem is that i am new to javascript and cookies within. Can someone let me know what part i need to change? I have messed with some of it but seem to be making it worse.
As it sits on my site (http://www.swissdiamond.us) You can see that it is working (loads the div the first time you are there, and not any other) but if you come back tomorrow the hidden div will re-load.
Thanks for any help
<script type="text/javascript">
//<![CDATA[
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(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;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
function showModal() {
tb_show('Newsletter Signup','#TB_inline?height=300&width=450&inlineId=promo',false);
}
var visited = readCookie('mypopup');
if (!visited) {
$(document).ready(function(){
showModal();
createCookie('mypopup','no',0);
});
}
//]]>
</script>

You need to update this line
date.setTime(date.getTime()+(days*24*60*60*1000));
Or you can pass days value from here
createCookie('mypopup','no',0); // make the last parameter value as much as you want
Here you can add more days as you want. hope this helps.

Your createCookie function sets the expiry for you, however you are passing 0 as the days value to expire, so the cookie does not persist. Try this:
createCookie('mypopup', 'no', 7); // 7 = expires in 7 days, amend as required.

Can I prevent a javascript redirect from firing if the user got to it by using the back button?

I have a script that redirects the user to a new page after X seconds. After being redirected, if the user hits their back button and returns to the page with this script I'd like it if the script does not fire again.
setTimeout(function() {
window.location.href = "/mypage.html";
}, 3000);

You can get the referrer property in JavaScript like this:
var referrer_url = document.referrer;
document.write("You come from this url: " +referrer_url);
Then, just wrap your setTimeout() with a conditional check to see which URL the person is coming from and do (or do not) do the redirect depending on where they came from.

I used the link Cerbrus provided and went the cookie route to solve this. More complicated than I would have liked but it got the job done.
This script will redirect the user to a new page after 3 seconds. It will first check if a cookie exists, and if it does it will not redirect. If there's no cookie, it will create a cookie and then redirect the user. If the user hits the back button the script will find the cookie that was created and it will prevent the script from redirecting the user again.
// Function to create a new cookie
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
// Function to read a cookie
function readCookie(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;
}
// Use the readCookie function to assign the cookie to a variable (if it's available)
var currentcookie = readCookie('mycookie');
// If/else statement to fire javascript if the cookie is not present
if (currentcookie) {
// do nothing since the cookie exists
}
else {
// Cookie doesn't exist, so lets do our redirect and create the cookie to prevent future redirects
// Create a cookie
createCookie('mycookie','true');
// Perform the redirect after 3 seconds
setTimeout(function() {
window.location.href = "/mypage.html";
}, 3000);
}