Cookie always ask for input - javascript

I have a problem. The JavaScript always displays a box to ask for the input every time I reload the page. It supposes to ask only once and then when I reload the page, it should display "Welcome again: your_input_here". I did try it with the VS Code using Live Server, and it worked. However, when I go to the folder which contains the files and click on the index.html file. It displayed a box ask for input, I did type the input in and click the submit button, then when I reload the page, the box displayed one more time and asks for the input without saving my last input. Can someone help me? Thank you
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 user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-width=1">
<script src="./cookie.js"></script>
<title>A14</title>
</head>
<body onload="checkCookie()">
</body>
</html>

Related

Cookies not loading after getting the input from the user

I'm learning to set and get cookies using javascript. Followed the tutorial by w3schools. It works well on the browser but doesn't fetch the cookies on my pc.
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let 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() {
let user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
I tried repeating the tutorial again but the results were same. I want the cookies displayed on my browser after getting the input
Simply run your .html page on IIS you will get your result

I am having problems with Cookies

The following HTML file is suppose to set a cookie and then the next time the file is loaded find the cookie. It works with the browser FireFox but not with Chrome. This was done on a Windows 10 machine.
A friend of mine tired it on his Mac for me and this is what he found:
Hit close, and in Chrome it came up again with no "username" in the text. In Safari, the message was "getCookie called withusername=" some 4 5hex numbers separated by dashes "helpSession=914438-1284431863267".
Hit the close button, and it came up with a proper box to enter the name, and a "Cancel" clickable area followed by an OK clickable area, on the right of the bigger box.
Entered "test" and hit OK. Chrome reported that it blocked the cookie. Safari reported an error, however the next time the 2nd message was "getCookie called withusername=test; helpSession=914438-1284431863267". The third OK gave "Welcome back test"
I am wondering what I am doing wrong.
Bob
Here is the code:
<!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();
alert( "expires=" + expires );
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
alert( "getCookie called" + document.cookie );
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 != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>

Javascript: Getting cookie value to record user's visit

This script keeps track of the number of times a surfer has visited page, and show the surfer of this info. Also with buttons to allow him/her to reset info. When the "Revisit Page" button is clicked, it refresh the page. Get the message according to the number of visits and print it. When the "Reset Counter" is clicked, it set the counter to zero and refresh the page. I did coding almost but it's not working. Can anyone tell me what's wrong in my code ?
code:
<!DOCTYPE html>
<html>
<head>
<title>cookie</title>
<style>
</style>
</head>
<body>
<div class="myDiv" id="div">
<p id="txt"> </p> </div>
<FORM>
<CENTER>
<INPUT NAME="update" TYPE="BUTTON" VALUE="Revisit Page" OnClick="history.go(0)" id="revisit">
<INPUT NAME="reset" TYPE="BUTTON" VALUE="Reset Counter" OnClick="ResetCounts()" id="reset">
</CENTER>
</FORM>
<script>
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
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 "";
}
function DisplayInfo() {
var expdate = new Date();
var visit;
expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
if(!(visit = GetCookie("visit")))
visit = 0;
visit++;
SetCookie("visit", visit, expdate, "/", null, false);
var message;
if(visit == 1)
message=" Welcome to my page!";
if(visit== 2)
message=" I see you came back !";
if(visit == 3)
message=" Oh, it's you again!";
if(visit == 4)
message=" You must be curious!";
if(visit == 5)
message=" You're practically a regular!";
if(visit == 6)
message=" You need a hobby!";
if(visit == 7)
message=" Nothing better to do?";
if(visit == 8)
message=" Don't you ever sleep?";
if(visit == 9)
message=" Get a life!!!";
if(visit >= 10)
message=" Rent is due on the 1st of the month!";
var txt = document.getElementById("txt").innerHTML = "Your browser has visited this page " + visit + " time(s)." + message;
}
function ResetCounts() {
var expdate = new Date();
expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
visit = 0;
SetCookie("visit", visit, expdate , "/", null, false);
history.go(0);
}
window.onload=DisplayInfo
</script>
</body>
</html>
Try these two functions instead - they work on my eCommerce site.
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 "";
}
Also make sure your own browser accepts cookies and isn't purging them while you're running tests.

Redirect if access page without passing through another

For example I got 3 pages:
page1.html
page2.html
page3.html
How can I block people from accessing page2 without going to page1 first?
I'd like the only way to access this page it'd be by passing to page1 and clicking a link. Then from page2, I can access page3. Thanks!
If someone tries to access it, either an error or a redirect to page1.
You can use cookies to do this. I'm not the best at javascript, but here is what I found that you can modify.
So here is a step by step process you can use to get your result. This example came from w3schools
You need to set a cookie on page1.html.
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=/";
}
Now you need to get and check the cookies.
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 != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
Hopefully, this will help you. Here is a fiddle with the complete JS: https://jsfiddle.net/uv3joc2b/
If you are using static html pages, you can add a cookie in page1.html, then read the cookie in page2.html.
If it doesn't exist redirect the user to page1.html

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