We Keep Coding

Questions about the concept behind the common cookie script

I am currently writing the cookies for the tag manager.
I found some good sources about creating cookies e.g in w3school. And I have a several question about the script:
1, For the last row of code in the setCookie function, does it means that the value e.g the number, will be stored in the variable document.cookie until it expires?
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
2, For the last row of code in the getCookie function
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
What does it stand for?
3, Why there is a return "" at the end of the getCookie function?
The full code is as follows:
checkCookie()
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);
}
}
}
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 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 "";
}
Many thanks for your help!

Cookie operations don't work in Opera or Chrome

I am trying to write a code which will ask a visitor of the website to enter his name, then i will store that name in a variable, next time he enter the page there will be a message saying "hello ..."
... = whatever name he put.
the code works in safari/IE/firefox but not in opera/chrome, i don't know why!!
The prompt message appear but the value is never stored. Each time it ask me again to enter the name
here is the code
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 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 name = getCookie("username");
if (name != "") {
document.getElementById('name').innerHTML = "Welcome again " + name;
}
else {
name = prompt("Please enter your name:", "");
if (name != "" && name != null) {
setCookie("username", name, 365);
}
}
}

How do i show output from cookies?

Hi i have one problem:
I have fully functioning cookies on my site, but I do not know how to display their content that the user wrote to them
My code is as follows:
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 + ";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 "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
} else {
user = prompt("BlaBlaBla","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
And i need to display it into <h1> tag there:
<h1 class="heading white"><br>Hi
**THERE**
</h1>
<br>
The cookie name that i want to show is "username" or "user"
I will be happy for any suggestions for putting cookies in place because I search the internet all day and I do not know the advice

Get the cookie and then just inject it into the html... I would add an ID to the html h1 tag.
var user = getCookie("username");
//This won't really work because the id isn't called that
var h1 = document.getElementById("heading white");
h1.innerHTML = user;

javascript how to update cookie with form text input

I have a javascript progrma that uses cookies to save users name and favorite item, in my example i am using pet. Html page will allow user to update their favorite pet through a form text input and update the cookie with input when button is clicked. Stuck on how to do so... any suggestions or help would be greatly appreciated.
<html>
<body onload="checkCookie()">
<header>
Cookies
</header>
<br>
<form>
<br>
Update favorite Pet:<br><br> <input type="text" name="fpet" id="fp"><br>
<br>
<button onclick="myUpdate()">Update</button>
</form>
<p>Favorite Pet:</p>
<p id="uip"></p>
<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 + ";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 "";
}
function checkCookie() {
var user=getCookie("username");
var pet=getCookie("fpet");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
if (pet != "") {
alert("Your favorite pet is " + pet);
} else {
pet = prompt("Please enter your favorite pet:","");
if (pet != "" && pet != null) {
setCookie("fpet", pet, 30);
}
}
document.getElementById("uip").innerHTML = pet;
}
</script>
</body>
</html>

You can try this. when you run it from local pc then sometimes it will not work. try to host it any server or local server.
<html>
<body onload="checkCookie()">
<header>Cookies</header>
<br><br>
Update favorite Pet:<br><br> <input type="text" name="fpet" id="fp"><br>
<br>
<button onclick="myUpdate()">Update</button>
<p>Favorite Pet:</p>
<p id="uip"></p>
<script type="text/javascript">
function myUpdate(){
var updateFp = document.getElementById("fp").value;
setCookie('fpet',updateFp,1);
document.getElementById("uip").innerHTML = getCookie('fpet');
}
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");
var pet = getCookie("fpet");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
if (pet != "") {
alert("Your favorite pet is " + pet);
} else {
pet = prompt("Please enter your favorite pet:","");
if (pet != "" && pet != null) {
setCookie("fpet", pet, 30);
}
}
document.getElementById("uip").innerHTML = pet;
}
</script>
</body>

My cookie values are not updating/changing

I am brand new to JavaScript and I am stuck with this code that I created to display the cookie username and the hit count. The problem is that the cookie values are not being updates when using the setCookies() function, but the same values are outputted again and again. Please help me fix it.
function setCookie(cname, cvalue, exdays, visits) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
var visit = visits.toString()
document.cookie = cname + "=" + cvalue + "; " + expires + "; visits=" + visit;
}
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");
var visitCount = getCookie("visits");
var visitCountConverted = Number(visitCount);
if (visitCountConverted == "") {
visitCountConverted = 1;
}
else if (visitCountConverted >= 1){
visitCountConverted += 1;
}
if (user != "") {
alert("Cookie: " + user + "\n" + "Visits: " + visitCountConverted);
setCookie("username", user, 365, visitCountConverted);
} else {
user = "TheName"; alert("Cookie: " + user + "\n" + "Visits: " + visitCountConverted); setCookie("username", user, 365, visitCountConverted);
}
}
Thank you very much.

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");
var visitCount = getCookie("visits");
var visitCountConverted = Number(visitCount);
if (visitCountConverted == "") {
visitCountConverted = 1;
}
else if (visitCountConverted >= 1){
visitCountConverted += 1;
}
if (user == "") {
user = "TheName";
setCookie("username", user, 365);
}
alert("Cookie: " + user + "\n" + "Visits: " + visitCountConverted);
setCookie("visits", visitCountConverted, 365);
}
checkCookie();//make sure to call this method so that cookies get set
You was not setting the visit counter cookie I have refactored your code as well so please give it a go