Html and javascript cookie dying after browser window closes - javascript

I've added a darkmode setting to my website, and I made a cookie using javascript so it's saved for when you come back, everything works like a charm until you close the browser window.
var cookie = document.cookie = 'darkmode=false; SameSite=none; Secure';
Is there a way to make the cookie stay for as long as possible?

You should add expires and/or max-age for the cookie.
Check the documentation for more information.
var cookie = document.cookie = 'darkmode=false; max-age=31536000; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=none; Secure';

Related

Create cookie on closing the browser window or tab

I have a problem. I want to create a cookie in JavaScript and I do it like the following:
document.cookie = "type=banner;expires=Thu, 25 Nov 2020 08:50:17 GMT";
Now the problem is that when I close the browser I want this cookie to expire and also to create a new one just like this document.cookie = "type=popup;expires=Thu, 25 Nov 2020 08:50:17 GMT";
How can I achieve the following functionality in JavaScript?
First of all you can listen for the beforeunload event. This happens "when the window, the document and its resources are about to be unloaded." BeforeUnloadEvent - Web APIs. A cookie can be deleted by setting its expires to zero Document.cookie - Web APIs. And then you can add the new one.
window.addEventListener('beforeunload', e => {
//"delete" the old cookie
document.cookie = "type=banner;expires=0";
//add the new cookie
var expires = new Date();
expires.setHours(expires.getHours()+2); // expires in two hours
document.cookie = `type=popup;expires=${expires.toUTCString()}`;
});

Inconsistent cookie setting behaviour

So I have the following code to set the javascript cookie in the url here
document.cookie = key + '=' + value + expires + cookieDomain +
cookiePath + secureCookieFlag;
with the following params
key : "location-and-language", value : "us|en", expires : "; expires=Thu, 31 Dec 2037 00:00:00 GMT", cookieDomain : ";, domain=.name.com", cookiePath : "; path=/", secureCookieFlag : ""
Now the issue is, when I run the same code in two different chrome instances
1) normal tab : the cookie is set
2) incognito tab : the cookie is not set
Requesting anyone to please help me understand why this different behaviour only because of incognito mode?
The purpose of incognito mode is to permit users to navigate without having their history saved in the browser.
That includes visited urls, cookies, site and forms data they possibly gathered or entered.

Is it safe to set cookie with unquoted path?

I would like to execute the following JavaScript to set a browser cookie:
document.cookie = "name=value;path='/'"
This works fine in Firefox, Chrome, and Safari. It does not work in IE, however. Removing the path part or unquoting '/' seems to set the cookie correctly in IE. I'm not an expert on the cookie spec. All of the guides online seem to quote the path. Is it required or optional to quote the path?
According to W3Schools correct syntax is following:
With a path parameter, you can tell the browser what path the cookie
belongs to. By default, the cookie belongs to the current page.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
http://www.w3schools.com/js/js_cookies.asp
Yes it is safe. it is the right way to do it when using plain old javascript.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
or via Jquery plugin jquery.cookie
$.cookie('name', 'value', { expires: 7, path: '/' });
//or
$.cookie('name', 'value', { path: '/' });

Clear Session Cookie in Browser Programmatically

How can I clear a session cookie that resides in the browser memory programmatically, preferably using javascript?
Since it's a session cookie and doesn't have an expiry date, setting the expiration date in the past will not work like it does for a persistent cookie.
I have a current session for our website, but we have an iframe that connects to another site. This site creates a session cookie. I would like to clear their session cookie without effecting ours. I can do it in Firefox via the clear cookies option, but I need to do it programmatically.
Thanks
I never did try the following method of deleting cookies since I read that session cookies don't have an expiration date, but here's what I've found. Will this work for reseting the session cookie? I know this deletes all cookies, but I could modify it.
function deleteCookies() {
var allcookies = document.cookie.split(";");
for (var i = 0; i < allcookies.length; i++) {
var cookie = allcookies[i];
var eqPos = cookie.indexOf("=");
var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
}
Read about Same-origin policy
In short, if the iframe is loaded from a different domain of the page where your JavaScript runs, then you cannot have access to the cookie. This is security restriction.
If the iframe is the same domain and as the page with your JavaScript, then you can remove the iframe's cookie by chaning the expiration date or assign to it empty value.

Setting a cookie in a different path, relative to the user's current URL path

I'm trying to set a cookie in a users session, relative to a path different than where the user currently is. (That is, the path I want the cookie to be relative to is "/", where the user is currently in in "/_CGI". I'm trying the following, but it's not working.
<script type="text/javascript">
$(document).ready(setMobileBrowsingCookie());
function setMobileBrowsingCookie()
{
document.cookie = "WF_BROWSING_MODE=MOBILE; path=/";
}
</script>
From my Chrome developer console, I can see the cookie being set when I remove the optional path=/ arg, but if I remove it, the cookie will be set relative to the CGI handle /_CGI. Is the path arg not being used correctly?
You need to set the cookie expiration as well.
document.cookie = 'WF_BROWSING_MODE=MOBILE; expires=Fri, 30 Aug 2012 20:47:11 UTC; path=/'

Categories