cookies not being set in javascript - javascript

I'm running into a problem with setting a value for a cookie. Everytime I run the function I made, it is always coming back with undefined for the cookie value. Here is my code:
login.html -
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;
}
$('#submit').click(function() {
if ($('#username').val() != "" && $('#password').val() != "") {
// set the cookie
// and redirect
setCookie("username", $('#username').val(), 365);
window.location = "profile.html";
} else {
alert("All fields must be filled out");
}
});
and on the profile.html page:
function getCookie(cookie_name) {
var name = cookie_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);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
$('#user_greet').html("<b>Welcome " + user + "</b>");
} else {
alert("You are not allowed to be here");
window.location = "login.html";
}
}
$(document).ready(function() {
checkCookie();
});
Any help would be appreciated.
Thanks!

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

Check for Cookie existance, if yes do whatever, if no set a cookie

So what im tryin to do is to check for a cookie existance (for example accepted=yes) If it is not set, it will return nothing and if not, it will execute some script and set the accepted=yes cookie. So that on the next visit the visitor wont see the popup.
var cookie = document.cookie;
if (cookie = accepted=yes) {
} else {
document.cookie = "accepted=yes";
}
That is the code i have discovered.
You can use getCookie and setCookie Functions
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 "";
}
Example
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);
}
}
Reference: W3Schools https://www.w3schools.com/js/tryit.asp?filename=tryjs_cookie_username

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.

select launguage popup cookie

In this code I am checking if a cookie is set and running a code to pop up a flag selection. If the cookie is not set it will set the cookie once a flaf is checked. It works in chrome but wont work on firefox. I used the code from WC3. Can someone help me find the issue here. Thank you in advance.
<script type="text/javascript">
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 languageSet = getCookie("setLanguage");
if (languageSet != "" || languageSet != null) {
return null;
} else {
jQuery.fancybox("#selectFlagDiv");
setCookie("setLanguage", setLanguage, 365);
}
}
</script>
<div id="selectFlagDiv" onload="checkCookie();" style="display:none;">
<img style="margin-bottom:18px;margin-top:18px;width:300px;height:180px;" src="1.gif" onclick="setLangStorage();" />
<img style="margin-bottom:18px;margin-top:18px;width:300px;height:180px;" src="2.gif" onclick="setLangStorage();" />
</div>

changing language doesn't work in Firefox

I have a website which supports two languages. In Chrome switching languages works great, but in Firefox it doesn't matter which button I click, for "english" or "german" language it always set my language variable for german language which is set by default
Can someone help me to resolve this issue?
here is example function where I call getLangCookie function
var lang = getLangCookie('lang');
console.log('lang = ', lang);
$.ajax({
type: "GET",
url: '/menu.xml',
dataType: "xml",
success: function (xml) {
$(xml).find('description ' + lang).each(function () {
$(this).parent().html($(this).html());
}
);
var menu = [];
var data = $.xml2json(xml)['#document'];
that.menu = data.menu;
console.log('menu = ', that.menu);
}
}
);
function getLangCookie(lang) {
var name = lang + "=";
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 "";
}
// by clicking on English button set the cookie value
function onEnglishbtn() {
setLangCookie("lang", "en", 30);
document.location.reload();
var lang = getLangCookie('lang');
return lang;
}
function setLangCookie(lang, value, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = lang + "=" + value + "; " + expires;
}
// function onload from index.html setting up the lang by default
window.onload = function () {
setLangCookie("lang", "de", 30);
if (typeof window.localStorage !== "undefined" && !localStorage.getItem('visited')) {
localStorage.setItem('visited', true);
setLangCookie("lang", "de", 30);
}
}
I think you should put the ajax request to the onload function as well something like this.
function getLangCookie(lang) {
var name = lang + "=";
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 "";
}
// by clicking on English button set the cookie value
function onEnglishbtn() {
setLangCookie("lang", "en", 30);
document.location.reload();
var lang = getLangCookie('lang');
return lang;
}
function setLangCookie(lang, value, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = lang + "=" + value + "; " + expires;
}
// function onload from index.html setting up the lang by default
window.onload = function () {
var lang_cookie = getLangCookie('lang');
console.log('lang_cookie = ', lang_cookie);
// if cookie doesn't exist
if (lang_cookie !== null) {
setLangCookie("lang", "de", 30);
} // if cookie exists
else {
console.log('lang_cookie exists!');
setLangCookie("lang", lang_cookie, 30);
}
$.ajax({
type: "GET",
url: '/menu.xml',
dataType: "xml",
success: function (xml) {
$(xml).find('description ' + lang_cookie).each(function () {
$(this).parent().html($(this).html());
}
);
var menu = [];
var data = $.xml2json(xml)['#document'];
that.menu = data.menu;
console.log('menu = ', that.menu);
}
});
}

Categories

Resources