Is it possible to read cookie expiration date using JavaScript?
If yes, how? If not, is there a source I can look at?
So if the intention of getting the Expires/ Max Age
data is to check if the cookie has not expired, to then do some A OR B action.
You could simply check if the cookie is available as the cookies get removed after the expiration date. Info from here
so with tha in mind:
const cookie = readCookieFunction('cookieName');
if(cookie) {
console.log(`cookie value: ${cookie}`);
// Do A
} else {
console.log('cookie has expired');
// Do B
}
There are some who will find this contentious - but one solution is to create another cookie at the same time and store the time/stamp in it parallel with whichever original cookie is created. Update them both at the same time and that way you can easily get the time from your new cookie (Alternatively append the time/stamp in your source cookie).
The reason this would be contentious is that over the years the idea of storing cookies on a users PC isn't popular because you are taking up their space. However I really doubt a small timestamp cookie would be too horrific.
Its worth remembering that if a time has passed then the browser will not report that cookie available. The browser may show the cookie present but when JS tries to access it - it won't be able too.
Additionally I found that WebDeveloper toolbar in Firefox shows cookies that have passed but under Firefox > Privacy settings they are updated correctly.
If you are using Chrome you can goto the "Application" tab (within Developer Tools) and find the item "Cookies" in the left sidebar. From there select the domain you are checking the set cookie for and it will give you a list of cookies associated with that domain, along with their expiration date.
There is a work-around to OP's question if you also control the setting of the cookies. I do it like this:
function setCookie(name, value, expiryInDays) {
const d = new Date();
d.setTime(d.getTime() + expiryInDays * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${value}_${d.toUTCString()};expires=${d.toUTCString()}`;
}
function showCookies() {
if (document.cookie.length !== 0) {
const allCookies = document.cookie.split(/;\s*/);
const wrapper = document.getElementById('allCookies');
wrapper.innerHTML = allCookies.reduce((html, cookie, index) => {
const cookieParts = cookie.split('=');
const cookieValueParts = cookieParts[1].split('_');
const cookieHtml = [
`<b>${index + 1}</b>`,
`Cookie name: ${cookieParts[0]}`,
`Cookie value: ${cookieValueParts[0]}`,
`Expires: ${cookieValueParts[1] || 'unknown'}`
].join('<br>');
return html + `<p>${cookieHtml}</p>`;
}, '');
}
}
<button onclick="showCookies()">Show me the cookies!</button>
<div id="allCookies"></div>
It is not possible to get the expiration date of a cookie through Javascript; only key-value pairs are exposed through document.cookie
.
Another way to do this would be to write the expiration date into the body of the cookie and then reread it from there for subsequent rewrites. I've gotten this to work with the fantastic js-cookies library.
Setting looks like this:
// Set cookie expiration as a number (of days)
var paywallDuration = 30;
// When you set the cookie, add the `expires` key/value pair for browsers
// Also add `expirationDate` key/value pair into JSON object
Cookies.set('article-tracker', {
expirationDate : paywallDuration,
totalArticlesRead: 1
}, {
expires : paywallDuration,
domain : 'example.com'
});
Reading your cookie and rewriting is straight-forward with this method. Use js-cookie's getJSON()
method to read the expiration date you set. Then, use that date twice when you rewrite your cookie - again in the JSON object and then for the browser with expires
:
var existingPaywallDuration = Cookies.getJSON('article-tracker').expirationDate;
Cookies.set('article-tracker', {
expirationDate: existingPaywallDuration,
totalArticlesRead: 4
}, {
expires : existingPaywallDuration,
domain : 'example.com'
});