Below is a code I am running to display a pair of images each day. I have been unable to have it display the images randomly, but instead each day it selects the next image in the Array (not at random). Javascript is not my specialty and I have been unsuccessful in making it select a new random image in both arrays each day.
I have also been unsuccessful in making it select them every 12 hours instead of each day, which is what I would prefer it to do. It must display the same ones for every person who views it for that period, until the timer resets, if possible.
<script type="text/javascript"><!--
var imlocation = "https://s31.postimg.org/";
function ImageArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
function linkArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
image = new ImageArray(4);
image[0] = 'v85buoebv/Day2.png';
image[1] = 'djdl322kr/Evening2.png';
image[2] = 'arubcg423/Night2.png';
image[3] = 'xf9kiljm3/Morning2.png';
link = new linkArray(11);
link[0] = 'q4xda5xdn/CLOUDY.png';
link[1] = '7141ttkjf/Heavyrain.png';
link[2] = 'gzp0gatyz/lightrain.png';
link[3] = 'xc3njrxob/Medium_Rain.png';
link[4] = 'x0m770h8b/NO_WEATHER.png';
link[5] = 's38mlwf97/omgrain.png';
link[6] = 'btigj04l7/Special_Weather.png';
link[7] = 'b59m025vf/WEREALLGONNADIErain.png';
link[8] = 'ubmt38md7/Windy.png';
link[9] = 'x0m770h8b/NO_WEATHER.png';
link[10] = 'x0m770h8b/NO_WEATHER.png';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.write('<div id="NOTICEME"><center><img src="' + imlocation + image[imagenumber] + '"><img src="' + imlocation + link[imagenumber] + '"></center><br><div id="mowords">[center][img]' + imlocation + image[imagenumber] + '[/img][img]' + imlocation + link[imagenumber] + '[/img][/center]</div></div>');
//--></script>
I used this code as a base to go on. But no matter how I toy with it, it won't give me a random image from the array. Also, the div ID "mowords" and "NOTICEME" is an ID I am using for CSS reasons that has nothing to do with this code.
Edit:
Maybe going for random is the wrong way to do this. Is there a way to make the link = new linkArray select the date (as in 1 - 31) and the image = new ImageArray select the day (as in 1 - 7) like it is currently doing? It will create variance and the illusion of randomness in the long run.
If you know your arrays' indices, and they are integers, then you can use the following to get a pseudo-random integer between min and max:
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
Now, however, your approach has been giving you certain "consistency" in your results, i.e. each day of the week giving you a certain image on every page show.
If you wish to implement randomness into it, you won't get such consistent results, meaning that on every page show, the image will be random independent of the day of the week or time of day.
To address this issue, you can take several approaches:
Have a server-side scripting language define the images (random or not) and save the "daily"/12-hour preferences into a .json/.js file, which then can be read by the JavaScript running in the browser. With this approach you would probably set the "refresh" rate via adding Expires headers on the .js file handling the parsing of the configuration file created by your server-side script -> https://gtmetrix.com/add-expires-headers.html
The other approach is to redefine your image selection logic based on the current date/time. However, the obvious downfall to that, is that you rely on the date and time of the user's computer, which can't always be trusted, so you have to work around that.
I would advise to look into a server-side scripting solution - PHP/Perl would do fine for this purpose.
UPDATED:
Have not tested, but try this (as per your comments):
<script type="text/javascript"><!--
var imlocation = "https://s31.postimg.org/";
function ImageArray (n) {
this.length = n;
for (var i = 0; i <= n; i++) {
this[i] = ''
}
}
function linkArray (n) {
this.length = n;
for (var i = 0; i <= n; i++) {
this[i] = ''
}
}
image = new ImageArray(6);
image[0] = 'v85buoebv/Day2.png';
image[1] = 'djdl322kr/Evening2.png';
image[2] = 'arubcg423/Night2.png';
image[3] = 'xf9kiljm3/Morning2.png';
image[4] = '';
image[5] = '';
image[6] = '';
link = new linkArray(30);
link[0] = 'q4xda5xdn/CLOUDY.png';
link[1] = '7141ttkjf/Heavyrain.png';
link[2] = 'gzp0gatyz/lightrain.png';
link[3] = 'xc3njrxob/Medium_Rain.png';
link[4] = 'x0m770h8b/NO_WEATHER.png';
link[5] = 's38mlwf97/omgrain.png';
link[6] = 'btigj04l7/Special_Weather.png';
link[7] = 'b59m025vf/WEREALLGONNADIErain.png';
link[8] = 'ubmt38md7/Windy.png';
link[9] = 'x0m770h8b/NO_WEATHER.png';
link[10] = 'x0m770h8b/NO_WEATHER.png';
link[11] = '';
link[12] = '';
link[13] = '';
link[14] = '';
link[15] = '';
link[16] = '';
link[17] = '';
link[18] = '';
link[19] = '';
link[20] = '';
link[21] = '';
link[22] = '';
link[23] = '';
link[24] = '';
link[25] = '';
link[26] = '';
link[27] = '';
link[28] = '';
link[29] = '';
link[30] = '';
var currentdate = new Date();
var dM = currentdate.getDate() - 1;
var dW = currentdate.getDay();
//var imagenumber = currentdate.getDay();
document.write('<div id="NOTICEME"><center><img src="' + imlocation + image[dW] + '"><img src="' + imlocation + link[dM] + '"></center><br><div id="mowords">[center][img]' + imlocation + image[dW] + '[/img][img]' + imlocation + link[dM] + '[/img][/center]</div></div>');
//--></script>
You use the function getDay() on the currentDate, therefore it will not change throughout a single day. Have a look at http://www.w3schools.com/jsref/jsref_getday.asp where you notice that its an integer from 0 to 6, and the week starts on sunday.
Therefore today (wednesday august 03 is 3) you should see image[3] and link[3]. Tomorrow you should get an error because you will reference outside of the image array i.e. image[4] will throw an index out of bounds exception.
Well, here goes my first answer here ever!
JavaScript is client-side code, so if the JavaScript code is what is determining the random number (rather than server-side code), you can't guarantee everyone accessing the site sees the same thing.
You could, however, use the date and time as a seed to generate what could appear random:
var btn = document.getElementById('btn');
btn.onclick = function () {
var d = new Date();
// getHours() results in an integer 0-23
var h = d.getUTCHours();
var chooser;
//Pick a multiplier based on the time of day.
if (h < 12) {
chooser = 1.15;
} else {
chooser = 1.87;
}
//Change upperLimit to whatever the upper limit of your array may end up being.
var upperLimit = 10;
//Generate the result
var pseudoRand = parseInt((d.getUTCFullYear() + d.getUTCMonth() + d.getUTCDay()) * chooser % upperLimit);
btn.textContent = pseudoRand;
}
Fiddle: https://jsfiddle.net/tapjzg94/
That code replaces the text of the button with an integer from 0 to upperLimit that should be the same for everyone who clicks on it, avoiding time zone issues with the UTC versions of the Date functions.
You could mix and match the date functions however you want, so long as they are all numbers that don't change on a rapid basis (year/month/date/day vs. minutes/seconds/milliseconds).
I found this fiddle:
https://jsfiddle.net/DinoMyte/sac63azn/3/
https://fiddle.jshell.net/DinoMyte/sac63azn/3/show/
var num = 10000000;
setInterval(function()
{
num++;
console.log(num);
$('div').text(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
},6000);
and it works almost the way I want it to. It is a counter where every 6 seconds, it will add a 1 to the number. For example: the number starts at 10,000,000 and then every 6 seconds, it adds a 1 to the number. The problem is when a user refresh or reloads the page, the number reverts back to the original 10,000,000. If after refresh or reload, is it possible the number will be saved from the last time? Persist? For example: the number is now 10,000,008, 6 seconds later it is 10,000,009, then the user click away or refresh or reloads the page, it should remember where the last number was left off: 10,000,009 and start counting from there.
You can use localStorage for this.
Just use this code
var num = localStorage.getItem('evaluatedTimer') || 10000000;
setInterval(function()
{
num++;
console.log(num);
var currentTimer = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
localStorage.setItem('evaluatedTimer', currentTimer');
$('div').text(currentTimer );
},6000);
You can set the var num value to javascript cookie. You can use the below javascript code to create, read or delete cookie val
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);
}
So, in your case you can persist num value like this
var num = 10000000;
setInterval(function()
{
num++;
createCookie('persist_num', num, 1);
console.log(readCookie('persist_num'));
$('div').text(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
},600);
How can I create and read a value from a cookie in JavaScript?
Here are functions you can use for creating and retrieving cookies.
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 getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
Minimalistic and full featured ES6 approach:
const setCookie = (name, value, days = 7, path = '/') => {
const expires = new Date(Date.now() + days * 864e5).toUTCString()
document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=' + path
}
const getCookie = (name) => {
return document.cookie.split('; ').reduce((r, v) => {
const parts = v.split('=')
return parts[0] === name ? decodeURIComponent(parts[1]) : r
}, '')
}
const deleteCookie = (name, path) => {
setCookie(name, '', -1, path)
}
JQuery Cookies
or plain Javascript:
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : ("; expires="+exdate.toUTCString()));
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0; i<ARRcookies.length; i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
ES7, using a regex for get(). Based on MDN
const Cookie = {
get: name => {
let c = document.cookie.match(`(?:(?:^|.*; *)${name} *= *([^;]*).*$)|^.*$`)[1]
if (c) return decodeURIComponent(c)
},
set: (name, value, opts = {}) => {
/*If options contains days then we're configuring max-age*/
if (opts.days) {
opts['max-age'] = opts.days * 60 * 60 * 24;
/*Deleting days from options to pass remaining opts to cookie settings*/
delete opts.days
}
/*Configuring options to cookie standard by reducing each property*/
opts = Object.entries(opts).reduce(
(accumulatedStr, [k, v]) => `${accumulatedStr}; ${k}=${v}`, ''
)
/*Finally, creating the key*/
document.cookie = name + '=' + encodeURIComponent(value) + opts
},
delete: (name, opts) => Cookie.set(name, '', {'max-age': -1, ...opts})
// path & domain must match cookie being deleted
}
Cookie.set('user', 'Jim', {path: '/', days: 10})
// Set the path to top level (instead of page) and expiration to 10 days (instead of session)
Usage - Cookie.get(name, value [, options]):
options supports all standard cookie options and adds "days":
path: '/' - any absolute path. Default: current document location,
domain: 'sub.example.com' - may not start with dot. Default: current host without subdomain.
secure: true - Only serve cookie over https. Default: false.
days: 2 - days till cookie expires. Default: End of session.
Alternative ways of setting expiration:
expires: 'Sun, 18 Feb 2018 16:23:42 GMT' - date of expiry as a GMT string.
Current date can be gotten with: new Date(Date.now()).toUTCString()
'max-age': 30 - same as days, but in seconds instead of days.
Other answers use "expires" instead of "max-age" to support older IE versions. This method requires ES7, so IE7 is out anyways (this is not a big deal).
Note: Funny characters such as "=" and "{:}" are supported as cookie values, and the regex handles leading and trailing whitespace (from other libs).
If you would like to store objects, either encode them before and after with and JSON.stringify and JSON.parse, edit the above, or add another method. Eg:
Cookie.getJSON = name => JSON.parse(Cookie.get(name))
Cookie.setJSON = (name, value, opts) => Cookie.set(name, JSON.stringify(value), opts);
Mozilla created a simple framework for reading and writing cookies with full unicode support along with examples of how to use it.
Once included on the page, you can set a cookie:
docCookies.setItem(name, value);
read a cookie:
docCookies.getItem(name);
or delete a cookie:
docCookies.removeItem(name);
For example:
// sets a cookie called 'myCookie' with value 'Chocolate Chip'
docCookies.setItem('myCookie', 'Chocolate Chip');
// reads the value of a cookie called 'myCookie' and assigns to variable
var myCookie = docCookies.getItem('myCookie');
// removes the cookie called 'myCookie'
docCookies.removeItem('myCookie');
See more examples and details on Mozilla's document.cookie page.
A version of this simple js file is on github.
For those who need save objects like {foo: 'bar'}, I share my edited version of #KevinBurke's answer. I've added JSON.stringify and JSON.parse, that's all.
cookie = {
set: function (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 + "=" + JSON.stringify(value) + expires + "; path=/";
},
get : function(name){
var nameEQ = name + "=",
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 JSON.parse(c.substring(nameEQ.length,c.length));
}
return null;
}
}
So, now you can do things like this:
cookie.set('cookie_key', {foo: 'bar'}, 30);
cookie.get('cookie_key'); // {foo: 'bar'}
cookie.set('cookie_key', 'baz', 30);
cookie.get('cookie_key'); // 'baz'
I've used accepted answer of this thread many times already. It's great piece of code: Simple and usable. But I usually use babel and ES6 and modules, so if you are like me, here is code to copy for faster developing with ES6
Accepted answer rewritten as module with ES6:
export const createCookie = ({name, value, days}) => {
let expires;
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = '; expires=' + date.toUTCString();
} else {
expires = '';
}
document.cookie = name + '=' + value + expires + '; path=/';
};
export const getCookie = ({name}) => {
if (document.cookie.length > 0) {
let c_start = document.cookie.indexOf(name + '=');
if (c_start !== -1) {
c_start = c_start + name.length + 1;
let c_end = document.cookie.indexOf(';', c_start);
if (c_end === -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return '';
};
And after this you can simply import it as any module (path of course may vary):
import {createCookie, getCookie} from './../helpers/Cookie';
Here's a code to Get, Set and Delete Cookie in JavaScript.
function getCookie(name) {
name = name + "=";
var cookies = document.cookie.split(';');
for(var i = 0; i <cookies.length; i++) {
var cookie = cookies[i];
while (cookie.charAt(0)==' ') {
cookie = cookie.substring(1);
}
if (cookie.indexOf(name) == 0) {
return cookie.substring(name.length,cookie.length);
}
}
return "";
}
function setCookie(name, value, expirydays) {
var d = new Date();
d.setTime(d.getTime() + (expirydays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = name + "=" + value + "; " + expires;
}
function deleteCookie(name){
setCookie(name,"",-1);
}
Source: http://mycodingtricks.com/snippets/javascript/javascript-cookies/
Performance benchmark
Comparison of ES6 versions of some popular getCookie functions (with my improvements):
https://www.measurethat.net/Benchmarks/Show/16012/5/getcookie-for-vs-forof-vs-indexof-vs-find-vs-reduce
TL;DR: for...of version seams to be fastest for real-life cookies data :)
Important: document.cookie can provide duplicated cookie names if there are cookies with the same name for path=/ and current page path (eg. path=/faq). But the cookie for the current path will always be the first in the string, so be aware of this when using the reduce() version from the other answer provided here (it returns the last found cookie instead of the first one).
Fixed reduce() version is further in my answer.
For..of version:
Fastest for the real-life benchmark data set (10 cookies with long values). But performance results are almost the same as with vanilla for loop and with Array.find(), so use which you like :)
function getCookieForOf(name) {
const nameEQ = name + '=';
for (const cookie of document.cookie.split('; ')) {
if (cookie.indexOf(nameEQ) === 0) {
const value = cookie.substring(nameEQ.length);
return decodeURIComponent(value); // returns first found cookie
}
}
return null;
}
IndexOf version
Incredibly fast in the artificial test set of 1000 cookies with short values (because it doesn't create an array with 1000 records). To be honest, I consider there could be a bug in the test code that makes this version so crazy fast (if you would find some, pls let me know). Anyway, it's rather not probable to have 1000 cookies in the real App ;)
It's slow for the real-world test data set with 10 long cookies.
function getCookieIndexOf(name) {
const nameEQ = name + '=';
const cookies = document.cookie;
const cookieStart = cookies.indexOf(nameEQ);
if (cookieStart !== -1) {
const cookieValueStart = cookieStart + nameEQ.length;
const cookieEnd = cookies.indexOf(';', cookieValueStart);
const value = cookies.substring(
cookieValueStart,
cookieEnd !== -1 ? cookieEnd : undefined
);
return decodeURIComponent(value); // returns first found cookie
}
return null;
}
Array.find() version
function getCookieFind(name) {
const nameEQ = name + '=';
const foundCookie = document.cookie
.split('; ')
.find(c => c.indexOf(nameEQ) === 0); // returns first found cookie
if (foundCookie) {
return decodeURIComponent(foundCookie.substring(nameEQ.length));
}
return null;
}
Vanilla, old-school, for-loop version ;)
function getCookieFor(name) {
const nameEQ = name + "=";
const ca = cookies.split('; ');
for(let i=0; i < ca.length; i++) {
const c = ca[i];
if (c.indexOf(nameEQ) === 0) {
const value = c.substring(nameEQ.length);
return decodeURIComponent(value); // returns first found cookie
}
}
return null;
}
// ES5 version:
function getCookieFor(name) {
var nameEQ = name + "=";
var ca = cookies.split('; ');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
if (c.indexOf(nameEQ) === 0) {
var value = c.substring(nameEQ.length);
return decodeURIComponent(value); // returns first found cookie
}
}
return null;
}
Array.reduce() version
My fixed version of this answer from #artnikpro - returns the first found cookie, so works better with duplicated cookie names for the current path (e.g. path=/faq) and path=/.
This version is the slowest one in all performance tests, so IMHO should be avoided.
function getCookieReduce(name) {
return document.cookie.split('; ').reduce((r, v) => {
const [n, ...val] = v.split('='); // cookie value can contain "="
if(r) return r; // returns first found cookie
return n === name ? decodeURIComponent(val.join('=')) : r; // returns last found cookie (overwrites)
}, '');
}
You can run benchmarks by yourself here: https://www.measurethat.net/Benchmarks/Show/16012/5/getcookie-for-vs-forof-vs-indexof-vs-find-vs-reduce
setCookie() TypeScript function
Here is also my version of the function to set a cookie with encodeURIComponent, TypeScript, and SameSite option (which will be required by Firefox soon):
function setCookie(
name: string,
value: string = '',
days: number | false = false, // session length if not provided
path: string = '/', // provide an empty string '' to set for current path (managed by a browser)
sameSite: 'none' | 'lax' | 'strict' = 'lax', // required by Firefox
isSecure?: boolean
) {
let expires = '';
if (days) {
const date = new Date(
Date.now() + days * 24 * 60 * 60 * 1000
).toUTCString();
expires = '; expires=' + date;
}
const secure = isSecure || sameSite === 'none' ? `; Secure` : '';
const encodedValue = encodeURIComponent(value);
document.cookie = `${name}=${encodedValue}${expires}; path=${path}; SameSite=${sameSite}${secure}`;
}
Google Chrome Cookie Storage API
Thanks to #oncode answer it's worth mentioning that the Google Chrome team has proposed some standardization (finally! It's really ridiculous that we still don't have any commonly accepted API for cookies) with asynchronous Cookie Storage API (available in Google Chrome starting from version 87): https://wicg.github.io/cookie-store/
Unfortunately, it's still unofficial and isn't even under W3C consideration nor ES proposal: github.com/tc39/proposals
Such a shame we still don't have any standard API for cookies...
Fortunately, we have cookie-store polyfill for other browsers as npm package (gitHub), which is only 1.7kB Gzipped ;)
I use this object. Values are encoded, so it's necessary to consider it when reading or writing from server side.
cookie = (function() {
/**
* Sets a cookie value. seconds parameter is optional
*/
var set = function(name, value, seconds) {
var expires = seconds ? '; expires=' + new Date(new Date().getTime() + seconds * 1000).toGMTString() : '';
document.cookie = name + '=' + encodeURIComponent(value) + expires + '; path=/';
};
var map = function() {
var map = {};
var kvs = document.cookie.split('; ');
for (var i = 0; i < kvs.length; i++) {
var kv = kvs[i].split('=');
map[kv[0]] = decodeURIComponent(kv[1]);
}
return map;
};
var get = function(name) {
return map()[name];
};
var remove = function(name) {
set(name, '', -1);
};
return {
set: set,
get: get,
remove: remove,
map: map
};
})();
For reading simple querystrings, this one-liner might work for you in recent versions of JavaScript:
let cookies = Object.fromEntries(document.cookie.split(';').map(i=>i.trim().split('=')));
And now you have a JavaScript Object with keys and values.
For creating, you can try this one:
let cookieObject = {foo: 'bar', ping: "pong"}
Object.entries(cookieObject).map((e)=>`${e[0]}=${e[1]}`).join(';')
I've used js-cookie to success.
<script src="/path/to/js.cookie.js"></script>
<script>
Cookies.set('foo', 'bar');
Cookies.get('foo');
</script>
You can use my cookie ES module for get/set/remove cookie.
Usage:
In your head tag, include the following code:
<script src="https://raw.githack.com/anhr/cookieNodeJS/master/build/cookie.js"></script>
or
<script src="https://raw.githack.com/anhr/cookieNodeJS/master/build/cookie.min.js"></script>
Now you can use window.cookie for store user information in web pages.
cookie.isEnabled()
Is the cookie enabled in your web browser?
returns {boolean} true if cookie enabled.
Example
if ( cookie.isEnabled() )
console.log('cookie is enabled on your browser');
else
console.error('cookie is disabled on your browser');
cookie.set( name, value )
Set a cookie.
name: cookie name.
value: cookie value.
Example
cookie.set('age', 25);
cookie.get( name[, defaultValue] );
get a cookie.
name: cookie name.
defaultValue: cookie default value. Default is undefined.
returns cookie value or defaultValue if cookie was not found
Example
var age = cookie.get('age', 25);
cookie.remove( name );
Remove cookie.
name: cookie name.
Example
cookie.remove( 'age' );
Example of usage
I use the following functions, which I have written by taking the best I have found from various sources and weeded out some bugs or discrepancies.
The function setCookie does not have advanced options, just the simple stuff, but the code is easy to understand, which is always a plus:
function setCookie(name, value, daysToLive = 3650) { // 10 years default
let cookie = name + "=" + encodeURIComponent(value);
if (typeof daysToLive === "number") {
cookie += "; max-age=" + (daysToLive * 24 * 60 * 60);
document.cookie = cookie + ";path=/";
}
}
function getCookie(name) {
let cookieArr = document.cookie.split(";");
for (let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");
if (name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1].trim());
}
}
return undefined;
}
function deleteCookie(name) {
setCookie(name, '', -1);
}
The chrome team has proposed a new way of managing cookies asynchronous with the Cookie Storage API (available in Google Chrome starting from version 87): https://wicg.github.io/cookie-store/
Use it already today with a polyfill for the other browsers: https://github.com/mkay581/cookie-store
// load polyfill
import 'cookie-store';
// set a cookie
await cookieStore.set('name', 'value');
// get a cookie
const savedValue = await cookieStore.get('name');
Very short ES6 functions using template literals. Be aware that you need to encode/decode the values by yourself but it'll work out of the box for simplier purposes like storing version numbers.
const getCookie = (cookieName) => {
return (document.cookie.match(`(^|;) *${cookieName}=([^;]*)`)||[])[2]
}
const setCookie = (cookieName, value, days=360, path='/') => {
let expires = (new Date(Date.now()+ days*86400*1000)).toUTCString();
document.cookie = `${cookieName}=${value};expires=${expires};path=${path};`
}
const deleteCookie = (cookieName) => {
document.cookie = `${cookieName}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;`;
}
Simple way to read cookies in ES6.
function getCookies() {
var cookies = {};
for (let cookie of document.cookie.split('; ')) {
let [name, value] = cookie.split("=");
cookies[name] = decodeURIComponent(value);
}
console.dir(cookies);
}
Through a interface similar to sessionStorage and localStorage:
const cookieStorage = {
getItem: (key) {
const cookies = document.cookie.split(';')
.map(cookie => cookie.split('='))
.reduce(
(accumulation, [key, value]) => ({...accumulation, [key.trim()]: value}),
{}
)
return cookies[key]
},
setItem: (key, value) {
document.cookie = `${key}=${value}`
},
}
Its usage cookieStorage.setItem('', '') and cookieStorage.getItem('').
An improved version of the readCookie:
function readCookie( name )
{
var cookieParts = document.cookie.split( ';' )
, i = 0
, part
, part_data
, value
;
while( part = cookieParts[ i++ ] )
{
part_data = part.split( '=' );
if ( part_data.shift().replace(/\s/, '' ) === name )
{
value = part_data.shift();
break;
}
}
return value;
}
This should break as soon as you have found your cookie value and return its value. In my opinion very elegant with the double split.
The replace on the if-condition is a white space trim, to make sure it matches correctly
I have written simple cookieUtils, it has three functions for creating the cookie, reading the cookie and deleting the cookie.
var CookieUtils = {
createCookie: function (name, value, expireTime) {
expireTime = !!expireTime ? expireTime : (15 * 60 * 1000); // Default 15 min
var date = new Date();
date.setTime(date.getTime() + expireTime);
var expires = "; expires=" + date.toGMTString();
document.cookie = name + "=" + value + expires + "; path=/";
},
getCookie: function (name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) {
return parts.pop().split(";").shift();
}
},
deleteCookie: function(name) {
document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
};
Here is the example from w3chools that was mentioned.
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
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 "";
}
A simple read
var getCookie = function (name) {
var valueStart = document.cookie.indexOf(name + "=") + name.length + 1;
var valueEnd = document.cookie.indexOf(";", valueStart);
return document.cookie.slice(valueStart, valueEnd)
}
A cheeky and simple way of reading a cookie could be something like:
let username, id;
eval(document.cookie);
console.log(username + ", " + id); // John Doe, 123
This could be used if you know your cookie contains something like: username="John Doe"; id=123;. Note that a string would need quotes in the cookie. Not the recommended way probably, but works for testing/learning.
I am displaying a div on my site, and I want to only display this div 5 times that the user has visited my site. So after 5 times, it wont show the div anymore.
I can do it with cookies. But Im only familiar with PHP. Javascript isn't my strong side.
Does anybody have a short piece of code to set a cookie, increase it for every visit, and if value is greater than 5 then don't show the DIV anymore?
Thanks
let's say you have the variable visits in the cookies, you mainly use something similar to this
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
var visits = getCookie("visits_number");
if (visists > 5)
document.getElementById("your_div_name").setAttribute("style", "visibility: hidde");
Quirksmode has an article discussing cookies, which also includes three very handy helper functions (scroll down to the bottom). Read the article and all will become clear anyway.
Just remember that all information is stored as a string, and hence it is retrieved as a string. Therefore you should definitely be doing some manual type juggling before performing any operations on the data. See here:
var x = 1;
createCookie("myVar", x);
var newX = readCookie("myVar") + 1;
alert(newX); // "11"
// --- instead, do this: ---
var newX = parseInt(readCookie("myVar"), 10) + 1;
Nobody will have exactly the piece of code you are asking for, but it should be easy to compose it yourself, starting from these 2 necessary functions:
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 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;
}