Live Cookie Checker in js - javascript

I'm working on a solution that checks the cookies in real time.
Once you have opened a link, a cookie is created. This cookie should be checked in real time and depending on the content, the corresponding text (send button) should be displayed.
The code works. Where I have the problem is with the IF sequence, which should be checked again and again without reloading the page.
<script language="JavaScript" type="text/javascript">
function SetCookie(cname, cvalue) {
var d = new Date();
d.setTime(d.getTime() + (3560*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires;
};
function getCookieValue(a) {
var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
return b ? b.pop() : '';
};
</script>
<img src="bilder/icon.png" height="75">
<script language="JavaScript" type="text/javascript">
if (getCookieValue("klickonbutton") == 'ja') {
document.write ('<input type="submit" value="Senden" id="senden">');
} else {
document.write ('<p><b><font color="#FF0000">Error Message</b></font></p>');
document.write ('<input type="submit" value="Senden" id="senden" disabled="disabled">');
};
</script>

document.write deletes the entire HTML and adds the Html which you specify in the parameter. Instead what you should do is add the button and error div on the HTML and toggle the display of these based on the cookie value. Check out the sample code.
<img src="bilder/icon.png" height="75">
<input type="submit" value="Senden" id="senden">
<p style="display: none" id="error"><b><font color="#FF0000">Error Message</b></font></p>
<script language="JavaScript" type="text/javascript">
function SetCookie(cname, cvalue) {
var d = new Date();
d.setTime(d.getTime() + (3560*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires;
checkIsCookieAvailable();
};
function getCookieValue(a) {
var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
return b ? b.pop() : '';
};
function checkIsCookieAvailable() {
const senden = document.querySelector('#senden');
const error = document.querySelector('#error');
setInterval(() => {
if (getCookieValue("klickonbutton") == 'ja') {
senden.style.display = 'block';
senden.disabled = false;
error.style.display = 'none';
} else {
error.style.display = 'block';
senden.disabled = true;
}
}, 1000)
}
</script>

Related

How to Delete My JavaScript Cookies?

I have created javascript functions to set and delete cookies.
setCookie is working perfectly but eraseCookie is not working.
HTML
<a onclick="setCookie('analystics');">Allow</a>
<a onclick="eraseCookie('analystics')">Deny</a>
<p>Click on this paragraph.</p>
JavaScript
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (30 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
var values = document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
doSomething(cname);
}
function doSomething(cname) {
console.log(cname);
var myCookie = cname;
if (myCookie == null) {
alert('null');
} else {
alert('defined');
$("p").click(function() {
alert("The paragraph was clicked.");
});
}
}
Cookie Delete Function:
function eraseCookie(cname) {
setCookie(cname, '', -1);
alert('The cookie has been successfully erased.');
}

Javascript if cookie exist apply css

I want to apply css through javascript if cookie xxxexist - code:
<script>
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=/";
}
var kuki = document.cookie.indexOf('cookie_name=xxx');
alert(kuki);
if (kuki != -1)
{
document.getElementById("ads-back").style.display = "none";
document.getElementById("ffield").style.display = "none";
document.getElementById("bcd").style.display = "none";
}
else { setCookie(xxx, 1, 1) }
</script>
The problem is that I always receiving -1 it should after seting cookie setCookie(xxx, 1, 1) get different value?
setCookie(xxx, 1, 1)
As you are setting cookie name with xxx variable and finding it with cookie_name as below that is the issue..try to find the index of cookie actual name set then it will work.
var kuki = document.cookie.indexOf('cookie_name=xxx');
To save cookie you have to use following format
document.cookie = cname + "=" + cvalue + ";expires=" + expires + ";";
To get saved cookies you have to use following both ways because if you have saved more than one cookie your cookie may not be the first element of the cookie array so you have to check both 'cookie_name=xxx' and
' cookie_name=xxx'
var kuki1 = document.cookie.indexOf('cookie_name=xxx');
var kuki2 = document.cookie.indexOf(' cookie_name=xxx');

JavaScript function deleteCookie() is not working for me

I am trying to learn JavaScript and got hung up on trying to create a button that deletes a cookie, but my code simply is not working and I have been stuck on this for hours now.
For convenience, the page is hosted here:
http://kazmer.x10host.com/Week4/delete_cookie_test.html
The cookie.js is located here:
http://kazmer.x10host.com/Week4/cookies.js
The code in the external cookies.js is the following:
function createCookie(name, value, days, path, domain, secure) {
if (days) {
var date = new Date();
date.setTime( date.getTime() + (days*24*60*60*1000));
var expires = date.toGMTString();
}
else var expires = "";
cookieString = name + "=" + escape (value);
if (expires) cookieString += "; expires=" + expires;
if (path) cookieString += "; path=" + escape (path);
if (domain) cookieString += "; domain=" + escape (domain);
if (secure) cookieString += "; secure";
document.cookie = cookieString;
}
function getCookie(name) {
var nameEquals = name + "=";
var crumbs = document.cookie.split(';');
for (var i = 0; i < crumbs.length; i++) {
var crumb = crumbs[i].trim();
if (crumb.indexOf(nameEquals) == 0) {
return unescape(crumb.substring(nameEquals.length,crumb.length));
}
}
return null;
}
The HTML for the page also has some JS in it:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Delete Cookie Test</title>
<meta charset="UTF-8" />
<meta name = "description" content = "JavaScript Test" />
<script src="cookies.js"></script>
<script>
window.onload = function() {
var cookievalue = prompt("Cookie Value:");
createCookie("myCookieData", cookievalue);
}
function viewCookieInfo() {
document.getElementById("output").innerHTML = "Your cookie value: " + getCookie("myCookieData");
}
function deleteCookie(name) {
name="myCookieData";
createCookie(name,"",-1);
}
</script>
</head>
<body>
<button type="button" onclick="viewCookieInfo()" >Display Cookie Info</button><br>
<div id="output"></div><br>
&nbsp &nbsp <button type="button" onclick="deleteCookie()" >Delete Cookie</button>
</body>
</html>
I understand the concept of expiring the cookie, but it's just not working and I hope someone will point out my error(s) here.
Thank you in advance!

Cookie values consistently returning null

I'm attempting to use a prompt to have someone enter a value, make that value into a cookie, then have a link that will redirect that person to a second page where their cookie value would be displayed. The issue I'm running into is that the cookie in question continues to be returned null, no matter what I input. Any help would be appreciated!
This is meant to be a Javascript code.
First Page (Prompt Page)
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers</title>
<script>
function createCookie(name, value, days, path, domain, secure) {
if (days) {
var date = newDate();
date.setTime( date.getTime() + (days*24*60*60*1000));
var expires = date.toGMTString ();//code
}
else var expires = "";
cookieString = name + "=" + escape(value);
if (expires) cookieString += ";expires=" + expires;
if (path) cookieString += "; path=" + escape (path);
if (domain) cookieString += "; domain=" + escape (domain);
if (secure) cookieString += "; secure";
document.cookie = cookieString
}
function getCookie(name) {
var nameEquals = name + "=";
var crumbs = document.cookie.split(';');
for (var i = 0; i < crumbs.length; i++) {
var crumb = crumbs[i];
if (crumb.indexOf(nameEquals) == 0) {
return unescape(crumb.substring(nameEquals.length, crumb.length));
//code
}
}
return null;
}
function deleteCookie(name) {
createCookie(name,"",-1);
//code
}
</script>
<script>
window.onload = function() {
var cookievalue = prompt("Cookie Value:");
createCookie("myCookieData", cookievalue);
}
</script>
</head>
<body>
Go to Cookie Test Page 2
</body>
</html>
Second Page (Display Cookie Page)
<!DOCTYPE html>
<html>
<title>Cookie Testing</title>
<head>
<script>
function createCookie(name, value, days, path, domain, secure) {
if (days) {
var date = newDate();
date.setTime( date.getTime() + (days*24*60*60*1000));
var expires = date.toGMTString ();//code
}
else var expires = "";
cookieString = name + "=" + escape(value);
if (expires) cookieString += ";expires=" + expires;
if (path) cookieString += "; path=" + escape (path);
if (domain) cookieString += "; domain=" + escape (domain);
if (secure) cookieString += "; secure";
document.cookie = cookieString
}
function getCookie(name) {
var nameEquals = name + "=";
var crumbs = document.cookie.split(';');
for (var i = 0; i < crumbs.length; i++) {
var crumb = crumbs[i];
if (crumb.indexOf(nameEquals) == 0) {
return unescape(crumb.substring(nameEquals.length, crumb.length));
//code
}
}
return null;
}
function deleteCookie(name) {
createCookie(name,"",-1);
//code
}
</script>
<script>
window.onload = function () {
document.getElementById("output").innerHTML = "Your cookie value: " + getCookie("myCookieData");
}
</script>
</head>
<body>
Back to Cookie Test Page 1<br />
<div id="output"></div>
</body>
</html>
In addition, if anyone can give tips on to how to add a button to the second page to delete the cookies from the first page, that would also be greatly appreciated! But for now, I'd just like to figure out why my cookies keep being returned null. Thanks in advance!
Cookies are not allowed in local files on some browsers. So if you're using local files - try uploading those files to a server and trying again. Works for me.
To add a cookie delete button you can use:
<input type="button" onClick="deleteCookie('myCookieData')" />

If statement only working when else is the case

The idea here is to create a sort of "EULA wall". For some reason, whenever I test this code if I don't have the cookie, it works wonderfully, the EULA pops up, the accept button pops up and the accept button gives me the cookie. However, when I have the cookie, nothing in the actual if part happens. I currently have three "commands" one that would bring up the button again (a visual debug of sorts) one that would pass text to a <p></p>, and one that would call a function that runs the open.window(); function:
</script>
<p id = "loc"></p>
<script>
function printButton(){
var btn = document.createElement("BUTTON");
var text = document.createTextNode("accept");
btn.appendChild(text);
btn.setAttribute("onclick", "setCookie('accept','yes',365)")
document.getElementById("loc").appendChild(btn);
}
</script>
<script>
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;
location.reload();
}
</script>
<script>
function getCookie(cname) {
var name = cname + "=";
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);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return "";
}
</script>
<p id = "testingstuff"></p>
<script>
function checkCookie() {
var accept = getCookie("accept");
if (accept != "") {
newWindow();
printButton();
document.getElementById("testingstuff").innerHTML = "testing";
} else {
displayEULA();
printButton();
}
}
checkCookie();
</script>
<script>
function newWindow(){
window.open("http://google.com","_self");
}
</script>
</body>
</html>
Seems bizarre that this sort of thing would happen but maybe I'm just missing something obvious.

Categories

Resources