How to write a cookie to remember a username in JavaScript - javascript

I am working on a login page for a project and I am wondering how I would go about setting a cookie just to remember the username ?

Here is the sample code. for html Cookies.
<!DOCTYPE html>
<html>
<head>
<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 username:","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>

Related

Check if cookie exists, and if not open modal

I have a cookie set when client closes the modal, what I need is, the modal should only open when cookie is not set. My cookie is set for secure connection only, do you think that javascript can't access the cookie because of SSL? Thank you in advance.
function getCookie(c_name) {
var c_value = document.cookie,
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;
}
$(document).ready(function() {
var acookie = getCookie("mycookie");
if (!acookie) {
var count=-1; // initially -1 as we are having a delay of 1000ms
var counter=setInterval(timer, 1000); //1000 will run it every 1 second
function timer()
{
count=count+1;
if (count >=6) //+1 than the req time as we have a delay of 1000ms
{
clearInterval(counter);
var modal2 = document.getElementById('booking-modal-2');
if (modal2.style.display !== 'block') {
$("#booking-modal").fadeIn("slow");
$("#booking-modal").css("display", "block");
}
return;
}
// document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}
}
});

Disable checkbox and keep it disabled using cookies

This will keep the checkbox checked:
function setCookie(c_name, value, expiredays) {
var exdate = new Date()
exdate.setDate(exdate.getDate() + expiredays)
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate)
}
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 null
}
onload = function() {
document.getElementById('myCheck').checked = getCookie('myCheck') == 1 ? true : false;
}
function set_check() {
setCookie('myCheck', document.getElementById('myCheck').checked ? 1 : 0, 100);
}
<input type="checkbox" value="1" id="myCheck" onclick="set_check();">
I would also like to disable the checkbox after it's checked and keep it disabled using the cookies. How would I add that function to the existing code? Thanks!
onload = function() {
document.getElementById('myCheck').addEventListener('change', function(e) {
e.target.disabled = (getCookie('myCheck') == 1);
}
document.getElementById('myCheck').checked = (getCookie('myCheck') == 1);
}

Javascript cookie doesn't work on all page

Live site- http://chitrchatr.com
I successfully add setCookie function on exit button & another link. So, if anyone close popup or click on that link then cookie will be stored & popup never appears for him/her.
It works perfectly, i close/go to link it, it store cookie but when i try to go another page/link of website it appears again(cookie is already stored but it appers). Any idea how to fix it so it will never appears if anyone go to another page after storing cookie.
My HTML-
<div id="popupBox">
<div id='popupContent' class='visiblebox' style='width:500px;height:446px;z-index:999999;left: 31%; top: 15%;'>
<a onClick="document.getElementById('popupBox').style.display='none'; setCookie('abc', 'def', 1)" href='#' id='closebox' title='Close this box'>X</a>
....
PopUp content here
....
<a onClick="document.getElementById('popupBox').style.display='none'; setCookie('abc', 'def', 1)" href="http://chitrchatr.com/signup-and-win-new-smartphones-and-get-our-service-for-free/" target="_blank"><img class="alignnone size-full wp-image-1548" alt="Promotion_06" src="http://chitrchatr.com/wp-content/uploads/2014/01/Promotion_06.png" width="243" height="61" /></a>
</div>
</div>
Javascript-
<script type="text/javascript">
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));
}
return c_value;
}
if(getCookie('abc')=="def" && document.getElementById('popupBox'))
document.getElementById('popupBox').style.display='none';
</script>
add path to your cookie
function setCookie(name, value, days, secure) {
var expires = '';
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = '; expires='+date.toGMTString();
}
var domain = locDomain;
document.cookie = name + '='+escape(value) + expires + '; path=/' + (domain ? '; domain=.' + domain : '') + ((secure && locProtocol == 'https:') ? '; secure' : '');
}
Try setting the location of cookie as '/'

How can I get a webpage to display once and never show to the user again?

Im currently using a javascript code to check for a cookie and its working. But I want the user to be directed to another page once they have entered in their user ID (cookie). Is there another function that I can add so that the user can be directed to another page once I have the cookie? The code is set up where they wont see this window for a year.
I'm not sure what to add. Please help.
<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>
if(localStorage.beenHere){
//Been here before
}else{
localStorage.beenHere = 1;
}

jQuery cookie value is %5Bobject%20Object%5D

I have a simple html page and a js script:
HTML page:
<body>
<input type="text" id = "content">
<button type="button" id="btn"> Save </button>
</body>
Javascript:
$(document).ready( function(){
var cook = $.cookie('theName', { path: '/'});
if ( cook )
alert(cook);
$('#btn').click(function(){
var theName = $('#content').val();
alert(v.val());
$.cookie('theName', theName, { path: '/', expires: 7 });
alert("Cookie done");
});
});
Libraries:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<script type="text/javascript" src = "https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"> </script>
It should save my name and when I hit refresh to show my name. The only problem is when I try to read the cookie, instead of name shows %5Bobject%20Object%5D.
Thank you.
do:
$(document).ready( function(){
var cook = $.cookie('theName'); //get from cookie if exists
if ( cook )
alert(cook);
$('#but').click(function(){
var theName = $('#content').val();
alert(theName);
$.cookie('theName', theName, { expires: 7, path: '/' }); //set the cookie
alert("Cookie done");
});
});
Updated:
try adding:
$.cookie.raw = true;
var cook = $.cookie('theName', { path: '/'});
This overwrites the cookie with the string representation of { path: '/'}.
To actually retrieve the existing cookie just pass the name:
var cook = $.cookie('theName');
There is no point in passing the path anyway - if you are outside the path for which the cookie is set you simply don't get it at all.
Try This.
<!DOCTYPE html>
<html>
<head>
<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()">
</body>
</html>
Hope this helps.
Source:Here

Categories

Resources