I was trying to make a simple program that displays a welcome message if a cookie is set and if the cookie is not set it will display a prompt box, asking for the user name.
It doesn't work and I don't understand why. Can anyone tell me where is the problem in the code?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(c_name,value,expiredays){
var exdate = new Date();
exdate.setDate(exdate.getDate()+expiredays);
if(expiredays==null)
document.cookie = c_name + "=" + escape(value) +"";
else
document.cookie = c_name + "=" + escape(value) + ";expires="
+exdate.toGMTString());
}
function getCookie(c_name){
if(document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if(c_start!=-1)
c_start=c_start + c_name.length +1;
//index of the value's end
c_end=document.cookie.indexOf(";",c_start);
if(c_end==-1)//if it's the last cookie
c_end = document.cookie.length;
return unescape (document.cookie.substring(c_start,c_end));
}
}
return "";
}
function checkCookie(){
username=getCookie('username');
if(username!=null && username!="")
alert('welcome again ' + username+ '!');
else {
username=prompt('please enter your name:',"");
if(username!=null && username!="")
setCookie('username',username,365);
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>
http://jsbin.com/AcanusA/12/edit
There're two errors in your code. One unclosed ")" (in setCookie() function just after last toGMTString();) and one unclosed "}" (in getCookie() function, just after if(c_start!=-1){).
Just take a look in your javascript console to check this errors. Here's the correction:
<html>
<head>
<script>
function setCookie(c_name,value,expiredays){
var exdate = new Date();
exdate.setDate(exdate.getDate()+expiredays);
if(expiredays==null)
document.cookie = c_name + "=" + escape(value) +"";
else
document.cookie = c_name + "=" + escape(value) + ";expires="
+exdate.toGMTString();
}
function getCookie(c_name){
if(document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if(c_start!=-1){
c_start=c_start + c_name.length +1;
//index of the value's end
c_end=document.cookie.indexOf(";",c_start);
if(c_end==-1)//if it's the last cookie
c_end = document.cookie.length;
return unescape (document.cookie.substring(c_start,c_end));
}
}
return "";
}
function checkCookie(){
username=getCookie('username');
if(username!=null && username!="")
alert('welcome again ' + username+ '!');
else {
username=prompt('please enter your name:',"");
if(username!=null && username!="")
setCookie('username',username,365);
}
}
</script>
</head>
<body onload="checkCookie()">
za
</body>
</html>
Here's an optimized version of your code:
function getCookie(name) {
var setPos = document.cookie.indexOf(name + '='), stopPos = document.cookie.indexOf(';', setPos);
return !~setPos ? null : document.cookie.substring(
setPos, ~stopPos ? stopPos : undefined).split('=')[1];
}
function setCookie(name, val, days, path) {
var cookie = name + "=" + escape(val) + "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
cookie += ";expires=" + date.toGMTString();
}
cookie += ";" + (path || "path=/");
console.log(cookie);
document.cookie = cookie;
}
var username = getCookie("username");
if (!username) {
setCookie("username", prompt("please enter your name:"), 365);
} else {
alert("welcome again " + username);
}
See test case on jsFiddle.
Related
I have been working on a script to show an alert box only once (using cookies). Here is what I have so far:
<script type="text/javascript">
function cookie(){
var x = document.cookie;
if (x = "") {
alert("Welcome to Steampunk Inc!");
document.cookie = 'iwashere=iwashere; expires=Fri, 31-Dec-9999 23:59:59 GMT;';
} else if (x = "iwashere=iwashere") {
console.log("You came back!");
}
}
cookie();
</script>
I have this as the first thing in the body of my html file. The code is on the index page on my website here.
The main problem is that you are using = operator with if. = operator assigns value to the variable. Instead you should use == operator to compare.
In addition document.cookie will return all cookies you have stored for your site. You should use some functions to get / set the specific cookies
Here is sample code:
<script type="text/javascript">
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
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 cookie(){
var x = getCookie("iwashere");
if (x == "" || x == null) {
alert("Welcome to Steampunk Inc!");
setCookie("iwashere", "iwashere", 365);
} else if (x == "iwashere") {
console.log("You came back!");
}
}
cookie();
</script>
I used the following JavaScript to create a pop-up window on the website and for it to show up only once. Now, my client wants a new promotion and I am trying to delete existing cookies and make it pop-up again (so that people who already visited the website, see the pop-up window again, only once like before). Here is the current code:
<!--
function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}
function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "") +
((expires) ? "; expires=" + expires.toGMTString() : "") ;
document.cookie = curCookie;
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1)
end = dc.length;
return unescape(dc.substring(begin + prefix.length, end));
}
function pop()
{
$(document).ready(function() {
$('#myModal').reveal();
});
}
var seen = getCookie("seen");
if (!seen) {
var now = new Date();
now.setTime(now.getTime() + 360000 * 1000);
setCookie("seen", 1, now);
pop();
}
//-->
I tried the following to reset the cookies
<!--
function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}
function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "") +
**";expires=Thu, 01 Jan 1970 00:00:01 GMT";**
document.cookie = curCookie;
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1)
end = dc.length;
return unescape(dc.substring(begin + prefix.length, end));
}
function pop()
{
$(document).ready(function() {
$('#myModal').reveal();
});
}
var seen = getCookie("seen");
if (!seen) {
var now = new Date();
now.setTime(now.getTime() + 1 * 1000);
setCookie("seen", 1, now);
pop();
}
//-->
It's not working. I'm new to JavaScript and would appreciate your help!
I see you have a nice mess so, if I have understood well, this code should do the job:
// on document ready
$(function(){
// check for the old cookie and delete it
if( Cookies.Check('seen') ) Cookies.Set('seen', '', -1); // delete the cookie if it exists
// now work with a new one with other name
if( !Cookies.Check('newmodal') ){ // if the cookie doesn't exist we show the modal and set the cookie
$('#myModal').reveal();
Cookies.Set('newmodal', 'true', 365); // days, if you need to use minutes see the method below
} // there is no `else` here, if the cookie exists nothing happens
});
/**
* Object with methods to manage cookies
* #type Object
*/
var Cookies = {
/**
* Checks if a cookie exists
* #param {String} name
* #return Boolean
*/
Check: function (name) {
return !!this.Get(name);
},
/**
* Gets a cookie value or returns false
* #param {String} name
* #return String|Boolean
*/
Get: function (name) {
var n, ca, c;
n = name + "=";
ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
c = ca[i].trim();
if (c.indexOf(name) === 0) return c.substring(name.length + 1, c.length);
}
return false;
},
/**
* Sets a cookie
* #param {String} name
* #param {String} value
* #param {Number} [expire]
* #param {Object} [options]
* #return Boolean|void
*/
Set: function (name, value, expire, options) {
var d = new Date(), expires;
var defaults = { expire_in: 'days', path: '/' };
if (typeof options !== "undefined") $.extend(true, defaults, options);
if (expire !== undefined && expire !== null) {
if (defaults.expire_in == 'days') d.setDate(d.getDate() + expire);
else if (defaults.expire_in == 'minutes') d.setDate(d.getTime() + expire * 1000);
else {
throw new JUtils.EX('expire_in configuration is not valid');
}
expires = "expires=" + d.toGMTString();
}
else expires = expires = "";
document.cookie = name + "=" + value + "; " + expires + '; path=' + defaults.path;
return true;
}
};
Is it possible? I want to save the state of the radio.. like : enabled or disabled.
if(dis == "dis1"){document.getElementById(dis).disabled=true;}
This does not last till the code it completed.
Once it is disabled, I want it to be disabled till the code is completed!
Here is a really nice implementation
var createCookie = function(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
So in your case
createCookie("radio", "checked/notchecked", 30);
and then to read it
getCookie("radio") === 'checked' or !== 'checked'
Source: How do I create and read a value from cookie? There are also some other solutions mentioned there, make sure you check them.
I am trying to create a webpage that has an alert when you start it. User will get prompted to enter name or your username. The username will get saved in a cookie. Everytime a new session gets started user will see a message saying "hello" + username. However, I haven't been able to do it without getting the message to popup after visiting a new part of the webpage.
This is my code so far:
HTML
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
window.c_value = c_value
return c_value;
}
function alertornot(){
if (get_cookie('alerted')==''){
loadalert()
document.cookie="alerted=yes"
}
}
function loadalert(){
alert(window.username + "we meet again" )
}
function alert() {
var username=getCookie("username");
if (username!=null && username!="") {
if (once_per_session==0) {
loadalert()
}
else {
alertornot()
}
}
else {
username=prompt("Please enter your name:","");
// window.username = username
if (username!=null && username!="") {
setCookies("username", username, 365)
}
}
}
I'm very new to programming and javascript. I am so sorry, if this is a stupid question.
You write "setCookies(...)", but it's "setCookie" without "s".
You make infinite loop, because you replace "alert(...)" native function and call alert() in this function.
Execute schema : alert() > loadalert() > alert() > loadalert() > etc...
Rename your function.
You didn't define "once_per_session" variable.
Javascript
function n_alert() {
window.username = getCookie("username");
console.log(username);
if (username!="undefined" && username!==null && username!=="") {
alert(window.username + " we meet again" );
} else {
username=prompt("Please enter your name:","");
if (username!==null && username!=="") {
setCookie("username", username, 365);
}
}
}
n_alert();
http://jsbin.com/ucipom/2/edit
You should not name a function alert as it is a global object already. Also, I do not see where you are calling any of this code.
I would rename the alert function to promptUser (or something) and add this code to the bottom:
promptUser();
loadAlert();
Try this:
<script>
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("Welcome again " + username);
}
else
{
username=prompt("Please enter your name:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
My last anwser here.
The popup still comes when I refresh the page
If you want pop-up only one time (not each refresh page), set one other cookie.
See Make a cookie expire in 30 seconds for set Cookie with second and not with day (for popupcookie).
Javascript
function isCookie(c_name) {
var cook = getCookie(c_name);
return (cook!="undefined" && cook!==null && cook!=="");
}
function n_alert() {
var username = getCookie("username");
if (isCookie("username")) {
if (!isCookie("popupcookie")) {
alert(username + " we meet again" );
} else {
console.log("hidden alert : " + username + " we meet again" );
}
setCookie("popupcookie", username, 1); //restart
} else {
username=prompt("Please enter your name:","");
if (username!==null && username!=="") {
setCookie("username", username, 365);
}
}
}
n_alert();
http://jsbin.com/ucipom/6/edit
Remark I found issue, if you use different directory (path) ex : './' and './dir1/1/'. You may have a problem. Like you don't define or re-define root cookie in directory. Maybe use sessionstorage.
For some reason this script gets stuck in a redirection loop and wont let you leave "android.html". The url bar shows it is trying to go to "index.html" but it just flashes then stays on "android.html"
var caution = false
function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "")
if (!caution || (name + "=" + escape(value)).length <= 4000)
document.cookie = curCookie
else
if (confirm("Cookie exceeds 4KB and will be cut!"))
document.cookie = curCookie
}
function getCookie(name) {
var prefix = name + "="
var cookieStartIndex = document.cookie.indexOf(prefix)
if (cookieStartIndex == -1)
return null
var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length)
if (cookieEndIndex == -1)
cookieEndIndex = document.cookie.length
return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex))
}
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT"
}
}
function fixDate(date) {
var base = new Date(0)
var skew = base.getTime()
if (skew > 0)
date.setTime(date.getTime() - skew)
}
var now = new Date()
fixDate(now)
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000)
var visits = getCookie("indexVisited")
if (!visits)
window.location.replace("./android.html");
else
window.location.replace("./index.html");
setCookie("indexVisited", visits, now)
Besides missing a whole lot of semicolons, your code tries to set the cookie after it redirects to another page. Javascript stops executing upon a redirect, so your setCookie call never gets executed. Try moving it up before the redirects.