I'm new JavaScript and looking for some help with cookies. What would be the most simple way of setting and retrieving a cookie from a prompt and then displaying a message with that cookie in an html element. Here is what I have so far but cant seem to display the message.
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
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) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
document.getElementById("welcome").innerHTML = username;
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()">
<p id="welcome"> <!-- want "Welcome again" + username message here --> </p>
</body>
</html>
Related
I've got a simple script, that I need to run only once per session of user. But in this session he could refresh page, or go to another page on one site.
My code now looks like this, but if user refresh page (in less then 10 seconds) or go to another page - script will never run :(
var visited = sessionStorage.getItem('visit');
if (visited == null || document.location.href == sessionStorage.getItem('lastPage')) {
setTimeout(function() {
alert('Hello World')
}, 10000
)
sessionStorage.setItem('visit', 1);
};
Working example: https://codepen.io/zavtraleto/pen/GdRpRZ
I think it's something with cookies, maybe
I made it using cookie, so if everyone interested:
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;
}
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) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
getCookie('user_first_visited') || setCookie('user_first_visited', Date.now());
if (!getCookie('user_popup_triggerred')) {
var loopDetect = setInterval(function(){
var TimePast = (Date.now() - getCookie('user_first_visited')) / 1000;
if( TimePast > 5){
if (localStorage.getItem('surveyOnce') !== 'true') {
(function() {
alert('Hello World!')
}
)();
localStorage.setItem('surveyOnce','true');
};
}
}, 1000);
}
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
I am trying to get the value of a cookie into a global variable in which I can then place into div's by using document.getElementById.
Here is my code - it works prefectly in terms of the fact it remembers the cookie but it just won't do one line in particular which I have clearly outlined with a comment for you.
Here is all my code...
<!DOCTYPE HTML>
<html>
<head>
<script>
var globalVar = "";
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
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) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
globalVar = getCookie("username");
document.getElementById("demo").innerHTML = globalVar; /* THIS LINE DON'T WORK WHY NOT! THE ONE BELOW DOES IN THE CHANGE COOKIE FUNCTION DOES! */
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
function changeCookie() {
var user = getCookie("username");
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
document.getElementById("demo").innerHTML = user; /* THIS WORKS! */
}
checkCookie();
</script>
</head>
<body>
<div id="demo"></div>
<button onclick="changeCookie()">Change username</button>
</body>
</html>
Try calling checkCookie() right after the page has finished loading.
<body onload="checkCookie()">
Another way is to move the script tag to the end of the page, right before the closing tag of body like this:
<html>
<body>
<div id="demo"></div>
<button></button>
<!-- the rest of the page's HTML here -->
<script>
....
.... your script code here
....
....
checkCookie();
</scirpt>
</body>
</html>
You are only assign html into "demo" in the first part of the case statement, you need to add it to the second part, and assign the user variable, not the globalVar. Also place the code at the end of the body as suggested in other answers.
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
globalVar = getCookie("username");
document.getElementById("demo").innerHTML = globalVar;
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
document.getElementById("demo").innerHTML = user;
}
}
}
I'm making a website that uses a cookie to get the user's name. When I try to get it to be shown with inner.html, it won't even prompt the user. Here is my code. The area is specific is the function checkCookie()
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
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) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != null) {
document.getElementById("person").innerHTML =
"Hello " + user + "!";
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()">
<p id="person">anonymous user</p>
</body>
</html>
Change
return "";
to:
return null;
checkCookie expects getCookie to return null when the cookie isn't found. An empty string is not the same as null.
DEMO
So I want to have a connect button that let's you join the server from a Web browser and when you click it, there is a popup that lets you choose your nickname. Also I want there to be a cookie that saves the username so you don't have to enter it every time.
Can this be done with only javascript in HTML?
Thanks
Here is a terrible bit of code I copied & pasted and modified for you. It is not exactly what you want but it should still work. You could make a button that opens a page in a new url with this code:
<script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*10000000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
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) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Welcome again " + user + ". You will now be redirected to our teamspeak server.");
window.location.assign("ts3server://ts.specternetworks.com?port=9987&nickname=" +user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
window.location.assign("ts3server://ts.specternetworks.com?port=9987&nickname=" +user);
}
}
</script>
<body onload="checkCookie()">
</body>
So I'm now learning about cookies and and got my cookie code form this page on w3schools.com.
Here on StackOverflow I looked up about redirecting and I've attempted to redirect to here is the cookie has not been set. This will redirect to a page on my server to accept cookie policy and customize the admin panel theme.
<!-- Javascript BEFORE page loads Starts -->
<script type="text/javascript">
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) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Cookie Set: " + user);
} else {
//user = prompt("Please enter your name:","");
if (user != "" && user != null) {
window.location.replace("http://stackoverflow.com");
}
}
}
</script>
<!-- Javascript BEFORE page loads Starts -->
</head>
<!-- Header Ends -->
<!-- Body Starts -->
<body onload="checkCookie()">
Why are you checking for user!="" && user!= null in the else block? the user variable is guaranteed to be empty when code enters in this block. This is why window.location.replace isn't executing and the reason why its not redirecting.
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;
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Cookie Set: " + user);
} else {
//user = prompt("Please enter your name:","");
setCookie("username", "value", 1);
window.location.replace("http://stackoverflow.com");
}
}