I'm trying to implement cookies for my website, i just wanted to redirect users to a splash page and have a "remember me" checkbox there and once they checked off that and pressed enter, they will not see that page anymore.
So using COOKIE Plugin I can set a cookie for users and redirect them to the page, but I wasn't able to implement how to detect the remember me box..
$(function() {
var COOKIE_NAME = 'splash-page-cookie';
$go = $.cookie(COOKIE_NAME);
if ($go == null) {
$.cookie(COOKIE_NAME, 'test', { path: '/', expires: 6 });
window.location = "/splash.php"
}
else {
}
});
Anybody has done like this before? Or anybody have any similar idea to implement this?
Any help would be appreciated.
Solution #1 (With alert boxes): I came up with this but without the COOKIE Plugin. Hopefully you can get some use out of this. Mostly Pure JS with some JQuery to fancy it up a little.
Here is the DEMO.
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<!-- JQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$('#remember').click(function() {
if (this.checked) {
$('#x').text("You're the Best!");
setCookie();
} else {
$('#x').text("Come on, You know you want to!");
}
});
});
function setCookie() {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
addCookie("username", user, 30);
}
}
function addCookie(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;
//window.location.href = "https://www.google.com"; // redirect after the prompt
}
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 "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Welcome again " + user);
window.location.href = "https://www.google.com";
}
}
function goTo() {
window.location.href = "https://www.google.com";
}
</script>
</head>
<body onLoad="checkCookie();">
<h1>Splash Page</h1>
<form>
<input type="checkbox" id="remember"> Remember me
<br>
<input type="button" value="Enter" onClick="goTo();">
</form>
<p><div id='x'></div></p>
</body>
</html>
Solution #2 (NO alert boxes): I came up with this as a second simplified solution by request which is more compatible with mobile (Chrome, etc.). Hopefully you can get some use out of this. Mostly Pure JS with some JQuery to fancy it up a little.
Here is the DEMO.
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<!-- JQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$('#remember').click(function() {
if (this.checked) {
$('#x').text("You're the Best!!!");
addCookie(30);
} else {
$('#x').text("Come on, You know you want to!");
deleteAllCookies();
}
});
});
function deleteAllCookies() {
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
var eqPos = cookie.indexOf("=");
var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
}
function addCookie(exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = expires;
}
function checkCookie() {
if (document.cookie == false) {
//alert("Welcome New User");
} else if (document.cookie.indexOf("expires") >= 0) {
//alert("Welcome Back");
window.location.href = "https://www.google.com";
}
}
function goTo() {
window.location.href = "https://www.google.com";
}
</script>
</head>
<body onLoad="checkCookie();">
<h1>Splash Page</h1>
<form>
<input type="checkbox" id="remember"> Remember me
<br>
<input type="button" value="Enter" onClick="goTo();">
</form>
<p><div id='x'></div></p>
</body>
</html>
Related
I was trying to make a page where we can chat and it will store its user's name to a cookie on the page. I tried it for a couple times, it worked. Then suddenly the cookie part doesn't work anymore. I am hosting the code on replit. What is the problem?
This is my code:
<!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() {
user = prompt("Please enter your name (your name wont be on the internet, use your real name. this is a school chat):","");
if (user != "" && user != null) {
setCookie("name", user, 30);
let user = getCookie("name");
document.getElementById("name").value = user;
}
else {
checkCookie()
}
}
function checkname() {
let user = getCookie("name");
if (user == "" && user == null) {
checkCookie()
}
else{
document.getElementById("welcome").innerHTML = "Welcome Back " + user;
document.getElementById("name").value = user;
}
}
</script>
</head>
<body onload=checkname()></body>
<p id="welcome"></p>
<form action="https://online-chat-2.red78massive157.repl.co" method="post">
Name: <br><input name="name" type="text" id="name" readonly/><br>
Message: <br><input name="message" type="text" style='height:100px; width:1000px' required/><br>
<input value="Send" type="submit"/>
</form>
<button onclick=checkCookie()>Change name</button>
<br><br>
<iframe src="https://online-chat-2.red78massive157.repl.co/chat" style='height:1000px; width:500px'/>
</html>
I am not really sure whats not working for you but I found that checkCookie function has an issue. You are trying to use variable user before initialization.
Rewrite code as
function checkCookie() {
const user = prompt("Please enter your name (your name wont be on the internet, use your real name. this is a school chat):","");
if (user != "" && user != null) {
setCookie("name", user, 30);
document.getElementById("name").value = getCookie("name");
}
else {
checkCookie()
}
}
I am trying to Save user input from a textarea in a javascript cookie on the unload of a page and then read it back into a textarea when the user returns. The issue that I am having is the cookie is not saving when the user input reaches a certain length. It seems to be working fine with small strings.
Here is the html:
<html>
<head>
<title>Cookie Test</title>
<link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body class="full" onload="GetCookies()" onunload="WriteCookies()">
<div class="fullscreen-overlay" id="fullscreen_overlay">
<div class="fullscreen-container js-fullscreen-container">
<div class="textarea-wrap">
<textarea name="fullscreen-contents" id="fullscreen-contents"></textarea>
</div>
</div>
</div>
</body>
</html>
Javascript:
function WriteCookies() {
var d = new Date();
var n = document.getElementById('fullscreen-contents').value;
d.setDate(d.getDate() + 1);
document.cookie = "mainCookie = " + n + "; expires = " + d.toGMTString() + "";
}
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 GetCookies() {
document.getElementById('fullscreen-contents').value = getCookie('mainCookie');
}
Any ideas what could be going on? Thanks!
The max size of a cookie is 4093 bytes. Perhaps the long string is just eclipsing that limit. You could consider localStorage or sessionStorage instead
var text = document.getElementById('fullscreen-contents');
function saveText() {
localStorage.savedText = text.value;
console.log("saved");
}
function getText() {
if (localStorage.savedText) {
text.value = localStorage.savedText;
console.log("loaded");
}
}
Edited: Here is a fiddle
I want to ask the user in my webapp with a drop-down menu which school website they want to open, then save that in a cookie and automatically open that website next time they open the webapp. I'm not good at JS so please explain.
Thank's in advance.
<head>
<script>
<!-- Cookie script -->
</script>
</head>
<body>
<form>
<select id="class">
<option value="Choose">Choose</option>
<option value="flah">School#1</option> <!-- Should redirect to site #1 -->
<option value="june">School#2</option> <!-- Should redirect to site #2 -->
</select>
<button type="submit">Välj</button>
</form>
</body>
Update:
<
form>
<select id="class">
<option value="Choose">Choose</option>
<option value="flah">School#1</option> <!-- Should redirect to site #1 -->
<option value="june">School#2</option> <!-- Should redirect to site #2 -->
</select>
<button type="submit" onclick="setCookie()">Välj</button>
</form>
<script type="text/javascript" language="javascript">
function setCookie(cookiename, cookievalue, cookieexdays) {
var d = new Date();
d.setTime(d.getTime() + (cookieexdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cookiename+ "=" + cookievalue+ "; " + expires;
}
function getCookie(cookiename) {
var name = cookiename+ "=";
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 school = getCookie("SelectedSchool");
if (school!= "") {
//redirect to user to link
alert("Welcome to the " + school);
} else {
user = prompt("Please choose your name:", "");
if (school != "" && school != null) {
setCookie("SelectedSchool", school, 365);
}
}
}
</script>
To create a cookie use:
document.cookie="key=value";
To get the value of the select use (example in jquery):
var val = $("#class").val();
Save that in the cookie.
Now next time the user logs in read the cookie using:
var x = document.cookie;
and redirect him with:
location.href = "link";
good luck
Try this, These are the JavaScript function which you can use to save, get or check cookie
<head>
<script>
<!-- Cookie script -->
</script>
</head>
<body>
<form>
<select id="class">
<option value="Choose">Choose</option>
<option value="flah">School#1</option> <!-- Should redirect to site #1 -->
<option value="june">School#2</option> <!-- Should redirect to site #2 -->
</select>
<button type="submit">Välj</button>
</form>
<script type="text/javascript" language="javascript">
function setCookie(cookiename, cookievalue, cookieexdays) {
var d = new Date();
d.setTime(d.getTime() + (cookieexdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cookiename+ "=" + cookievalue+ "; " + expires;
}
function getCookie(cookiename) {
var name = cookiename+ "=";
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 school = getCookie("SelectedSchool");
if (school!= "") {
//redirect to user to link
alert("Welcome to the " + school);
} else {
user = prompt("Please choose your name:", "");
if (school != "" && school != null) {
setCookie("SelectedSchool", school, 365);
}
}
}
</script>
</body>
i am new to JavaScript and this site and am trying to make a username and password creator and log in. for now i am just using a premade username and password for now. i have tried to do this with JavaScript but my code wont work for me on notepad++. i have learned a basic understanding of jQuery as a last resort to get this mock up site to run. can you tell me if there is a way to do it with JavaScript and how and if not can you explain the code to share variables across two different webpages using jQuery. pleas explain in plain simple English because as i said i am new to JavaScript and brand new to jQuery.
here is where the username and password variables are defined.
<!DOCTYPE html>
<html>
<head>
<title>
create account
</title>
<script>
sessionStorage.setItem( "username1", ["bob", "sam"]);
sessionStorage.setItem( "password1", ["lol", "jk"]);
</script>
</head>
<body>
</body>
</html>
here is where i call those variables
<!DOCTYPE html>
<html>
<head>
<title>
log on page
</title>
<script type = "text/javascript">
var count = 2;
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;
var unArray = sessionStorage.getItem("username1");
var unArray = sessionStorage.getItem("password1");
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Login was successful");
window.location = "http://www.google.com";
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid username and/or password. " +
"You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}
}
</script>
<!--this-->
<style>
p.log_on{
position: fixed;
top: 30px;
left: 20px;
}
</style>
</head>
<body>
<!--here-->
<form name = "myform">
<p class="log_on">
ENTER USER NAME <input type="text" name="username"><br><br><br><br><br>
ENTER PASSWORD <input type="password" name="pword">
<input type="button" value="Check In" name="Submit" onclick="validate()">
</p>
</form>
<!--to here-->
</body>
</html>
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to enable cookies
The readCookie is right under the greetUser function. I put in the writeCookie function but it causes the alert boxes not to show. So I commented it out.
This is about the cookies not working. I'm suppose to sort the username it a variable so that iRock will remember the name and use it in the prompt.
It seems like the last part of the code works because I get the alert boxes, but I don't get the first and second alert boxes. The page is suppose to open in an alert box saying, "Hello, I am a pet rock." but it doesn't.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iRock - The Virtual Pet Rock</title>
<link href="donut_stylesheet/donut.css" rel="stylesheet" type="text/css" />
<script type ="text/javascript">
var userName;
function resizeRock(){
document.getElementById("rockImg").style.height = (document.body.clientHeight - 100) * 0.9;
}
function greetUser(){
userName = readCookie("rock_username");
if(userName)
alert("Hello " + userName + ", I missed you.");
else
alert("Hello, I am your pet rock");
}
function touchRock(){
if(userName)
alert("I like attention," + userName + ". Thank you.");
}
userName = prompt("What is your name?", "Enter name here.");
if(userName)
alert("It is good to meet you, " + userName + ".");
//writeCookie(irock_username", userName, 1 * 365);
document.getElementById("rockImg").src = "rock_happy.png";
setTimeout("document.getElementById(('rockImg').src = 'images/rock.png';", 5 * 60 * 1000);
</script>
</head>
<body onload="resizeRock(); greetUser(); onResize="resizeRock();">
<img id="rockImg" src="images/rock.png" alt="iRock" style="cursor:pointer" onClick="touchRock();" />
</body>
</html>
There are no built in readCookie or writeCookie functions in JavaScript. You will have to supply your own, like this.
function writeCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = 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,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}