I want to set cookies using JavaScript that should not expire for some time. I create the cookie using the code below. These cookies are available in Firefox across browser session (browser restarts). However, all cookies seem to get lost in IE. I want to set the cookie using JavaScript only.
I alerted document.cookie on page load. In all Firefox I see all the cookies set, however in IE I am getting an empty alert. After the page is loaded if I access document.cookie, I see all the cookies. However, the cookie set from JavaScript is no more there.
To sum up, after a browser restart IE is destroying all cookies for the domain. Even the ones that have expiry set to future.
Here is the code.
function createCookie(name,value) {
var date = new Date();
date.setTime(date.getTime()+(30*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
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;
}
I think this depends on privacy-settings.
Did you change there something(are you browsing inPrivate?)
Related
Only using Javascript, can someone create a html file that uses "XY" html code when the user first visits it, but it should use "ZQ" (so a fully other one) html code after the first visit? So in the second, third, etc. visit of the same user. There could be many users.
Question: how would that html file look like? How to do it? Is it possible using only javascript?
You can use either Cookies or LocalStorage, where the LocalStorage is easier to implement, but requires the latest browser, and users may disable cookies for privacy reasons.
Cookies
function setCookie(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 getCookie(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;
}
// First Visit
if (getCookie("visited") == null) {
// XY code.
alert("XY Code here");
// set the cookie
setCookie("visited", "yes", 10);
} else {
// subsequent visit.
// ZQ code.
alert("ZQ Code here");
}
LocalStorage
if (typeof(Storage) !== "undefined") {
if (localStorage.getItem("visited") == "yes") {
// subsequent visit.
// ZQ code.
alert("ZQ Code here");
} else {
// XY code.
alert("XY Code here");
// set the cookie
localStorage.setItem("visited", "yes");
}
} else {
// Sorry! No Web Storage support..
// Use the above cookie method.
}
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');
}
});
Tying to write a JavaScript code that will detect if a user has cookies disabled in their browser. If they do, they will be redirected to another page. If they have their cookies enabled it just goes straight through as usual.
i have a code that already works but it still hits the page for a split second before redirection. Is there anyway to make it instant.An example of fast detection is here ( try it with cookies disabled) http://optusnet.com.au
You will see it is instant and doesn't load the page request first.
<script type="text/javascript">
/* function to create cookie #param name of the cookie #param value of the cookie #param validity of the cookie */
function createCookie(name, value, days)
{
var expires;
if (days)
{
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = ";
expires=" + date.toGMTString();
}
else
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);
}
/* This function will create a new cookie and reading the same cookie. */
function areCookiesEnabled()
{
var r = false;
createCookie("testing", "Hello", 1);
//creating new cookie
if (readCookie("testing") != null)
{
//reading previously created
cookie r = true;
eraseCookie("testing");
}
return r; //true if cookie enabled.
}
</script>
<script>
if(!areCookiesEnabled())
{
//redirect to page
}
</script>
You won't be able to make it "instant" with client-side code (i.e. JavaScript) because the page has to be loaded for this code to run. You can achieve this with server-side code, however (like the page you link to does). Here's what you'd have to do, in whatever your server-side language is:
On the load of your first page, set a cookie and immediately send a redirect instruction to your main page.
On your main page load, check for the cookie. If no cookie exists, cookies are disabled, so redirect to a third (error) page.
If the cookie exists, allow the page to load normally.
Alternatively, you can try making it faster by reducing the number of HTTP requests required for your "checking" page (i.e. don't include any styles, etc. on the first page and then redirect to a "proper" page if the test passes) and using more efficient detection methods as per Joe's comment; however, you won't be able to implement an immediate redirect with client-side code.
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);
}
I need to create a javascript cookie in order to do something with PHP (to be exactly, I need to get the viewport height of the browser, store that in a javascript cookie in order to get the value inside PHP). The only problem is I have no javascript experience, and I dont't understand google's explanation.
I'd like to have this value (var viewportHeight = $(window).height();) inside a cookie.
But how?
(google only gives examples with a static value).
try something like this:
var viewportHeight = $(window).height();
document.cookie = "viewportheight=" + viewportHeight + ";";
You can't have dynamic values for a cookie. You can however update the cookie every time the window resizes:
$(function(){
$(window).resize(function () {
createCookie( 'viewportHeight', $(window).height() );
});
});
// You should also use some cross-browser cookie functions that make your life a lot easier
// function taken from: http://www.quirksmode.org/js/cookies.html
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);
}
This way you can simulate "dinamic" values for a cookie.
Alternatively, you can just send the value via ajax to a php script every time the browser resizes, without having to use cookies at all
Seems like a bad idea to me. Your layout shouldn't required the exact pixel dimensions on the server side. But, if you really have no other option:
Use this jQuery plugin: https://github.com/carhartl/jquery-cookie
Then you can do the following:
// save the window height to a cookie whenever window is resized
$(window).resize(function(){
$.cookie('viewportHeight', $(window).height(), {path:'/'});
});
// trigger the resize function so it saves the cookie on first load
$(window).load(function(){
window.setTimeout(function() {$(window).resize();}, 0);
}
Then you access it from PHP in subsequent requests like so:
$viewportHeight = $_COOKIE['viewportHeight'];
Please note that if you need the cookie value in PHP before the user sees the first page, this will not work.