Multiple values on one cookie - javascript

The code I wrote should store multiple user values on one cookie, but for some reason it's not working. Can anyone care to explain my mistake?
var delimiter = "#";
function createCookie(name, value, days, path, domain, secure) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = date.toGMTString();
} else var expires = "";
cookieString = name + "=" + escape(value);
if (expires)
cookieString += "; expires=" + expires;
if (path)
cookieString += "; path=" + escape(path);
if (domain)
cookieString += "; domain=" + escape(domain);
if (secure)
cookieString += "; secure";
document.cookie = cookieString;
}
function getCookie(name) {
var nameEquals = name + "=";
var whole_cookie = document.cookie.split(nameEquals)[1].split(";")[0];
var crumbs = whole_cookie.split(delimiter);
}
function deleteCookie(name) {
createCookie(name, "", -1);
}
function myCookie() {
var name = document.getElementById('name').value;
var age = document.getElementById('age').value;
var userdata = name + delimiter + age;
createCookie("user", userdata);
var myUser = getCookie('user');
var myUserArray = myUser.split(delimiter);
var cookieName = myUserArray[0];
var cookieAge = myUserArray[1];
alert('The cookie created has the following user information stored on it: \nName: ' + cookieName '\nAge: ' + cookieAge);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Please enter your name
<input type=text id='name' />
<br>
<br>Please enter your age
<input type=text id='name' />
<input type=button value='Go!' onClick='myCookie()' />

There are a couple of mistakes in your code:
In getCookie, you forgot to return the value of your cookie !
function getCookie(name) {
var nameEquals = name + "=";
var whole_cookie=document.cookie.split(nameEquals)[1].split(";")[0];
return whole_cookie;
}
You have two inputs with id name, I think you want to rename one of them to age.
Make sure your document is fully loaded before you try to execute your Javascript! Either do that by wrapping your code around document.body.onload = function(){ [your code here] }, or by moving your <script> tag at the end of your document.
You are missing a + between cookieName and '\nAge' in your alert.
var delimiter = "#";
function createCookie(name, value, days, path, domain, secure) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = date.toGMTString();
} else var expires = "";
cookieString = name + "=" + escape(value);
if (expires)
cookieString += "; expires=" + expires;
if (path)
cookieString += "; path=" + escape(path);
if (domain)
cookieString += "; domain=" + escape(domain);
if (secure)
cookieString += "; secure";
document.cookie = cookieString;
}
function getCookie(name) {
var nameEquals = name + "=";
var whole_cookie = document.cookie.split(nameEquals)[1].split(";")[0];
return whole_cookie;
}
function deleteCookie(name) {
createCookie(name, "", -1);
}
function myCookie() {
var name = document.getElementById('name').value;
var age = document.getElementById('age').value;
var userdata = name + delimiter + age;
createCookie("user", userdata);
var myUser = getCookie('user');
var myUserArray = myUser.split(delimiter);
var cookieName = myUserArray[0];
var cookieAge = myUserArray[1];
alert('The cookie created has the following user information stored on it: \nName: ' + cookieName + '\nAge: ' + cookieAge);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Please enter your name
<input type=text id='age' />
<br>
<br>Please enter your age
<input type=text id='name' />
<input type=button value='Go!' onClick='myCookie()' />

Related

Add a value to a cookie with expiration data?

How can I add a cookie which expires in 2 months to 'test#gmail.com' from the following code
<div id="home">
<div class="name" my-data="123">Email: test#gmail.com</div>
</div>
I think the code for the actual time should be as follows but I do not know how to add the value to it:
function myemail () {
var expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 2);
document.cookie = cookieName + '=y; expires=' + expiryDate.toGMTString
Assuming you have privileges to add an ID to your div, the following code works fine
<body>
<div id="home">
<div class="name" my-data="123" id="email-div">Email: test#gmail.com</div>
<button onclick="myemail()">Set it</button>
</div>
<script>
function myemail() {
var expiryDate = new Date();
var email = document.getElementById("email-div").textContent.split("Email:")[1]
expiryDate.setMonth(expiryDate.getMonth() + 2);
document.cookie = 'emailCookie=' + email + ';expires=' + expiryDate.toGMTString() + ';path=/';
}
</script>
</body
Well I have used a button to trigger the action. You can do the same in any event.
toGMTString is a function, you need to call.
Replace expiryDate.toGMTString to expiryDate.toGMTString()
const Cookie = {
get: function (name) {
const nameEq = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let 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;
},
set: function (name, value, hours) {
const expires = "";
if (hours) {
let date = new Date();
date.setTime(date.getTime() + (hours * 60 * 60 * 1000));
const expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
};
You can change hours to whatever and of course
this one date.setTime(date.getTime() + (hours * 60 * 60 * 1000)); to the corresponding formula
Usage`
Set: Cookie.set('myemail', 'test#gmail.com', 1460) // 1460 is 2 months in hours
Get: Cookie.get('myemail')
const email = document.getElementsByClassName('name')[0].textContent.split(' ')[1]; Cookie.set('myemail', email, 1460);

Is this javascript code valid? And is it efficient? Trying to create a javascript user ID and a session ID

Im trying to create my own analytics script for my website, and for this I have tried to put together a way to create userID and sessionID.
But I am not sure if I have done it correctly.
I'm trying to:
Check to see if user has set a userID - if not set it.
check to see if user has a sessionID - it not set it.
the userID is set to follow the user, where the user continues to hold the userID on several visits, where the sessionID is unique for each visit.
if (getCookie('yb_uid') != null) {
if (getCookie('yb_sid') != null) {
setCookie('yb_uid', getCookie('yb_uid'), 730);
setSessionCookie(getCookie('yb_sid'));
} else {
setCookie('yb_uid', getCookie('yb_uid'), 730);
setSessionCookie(setSID());
}
} else {
setCookie('yb_uid', setUID(), 730);
setSessionCookie(setSID());
}
if (getCookie('yb_sid') == null || getCookie('yb_sid') ==
'undefined' || !getCookie('yb_sid')) {
setSessionCookie(setSID());
}
function setUID() {
return "ybID#" + _setID(5) + "-" + _setID(5) + "-" + Date.now();
}
function setSessionCookie(value) {
var now = new Date();
var minutes = 30;
now.setTime(now.getTime() + (minutes * 60 * 1000));
document.cookie = "yb_sid=" + value + "; max-age=" + now.toUTCString() + "; expires=" + now.toUTCString() + "; path=/";
} /*set session cookie*/
function getCookie(name) {
var re = new RegExp(name + "=([^;]+)");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
} /* get cookie value */
function _setID(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
var charactersLength = characters.length;
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
function setSID() {
var ts = Math.round(+new Date() + Math.random() / 1000);
return ts;
}
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
var expires = "; max-age=" + date.toGMTString() + " expires=" + date.toGMTString();
} else {
var expires = "";
}
document.cookie = name + "=" + value + expires + ";path=/";
Maybe this has an even easier way to script it?
Have you tried UUID https://www.npmjs.com/package/uuid for generating an user id?

Javascript set then display a cookie value

My problem seems to be easy but I can't make it work; I want to set a cookie variable called "splash" then display it (later I want use in IF clause)
Here is my code :
<html>
<head>
<script type="text/javascript">
document.cookie = "splash=" + encodeURIComponent("blue theme")
var re = new RegExp(splash + "=([^;]+)");
var value = re.exec(document.cookie);
alert(value);
</script>
</head>
<body>
</body>
</html>
You should change your regex to include splash as part of the quoted string. Even though spash is the variable you're using in the cookie, it does not automatically become a javascript variable.
document.cookie = "splash=" + encodeURIComponent("blue theme")
var re = new RegExp("splash=([^;]+)");
var theme = re.exec(document.cookie)[1];
re.exec returns an array. the first element is the entire matched string (including splash=). The second is your capture group (blue%20theme).
Use Following function to set and get Cookie
function createCookie(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 = "";
}
var fixedName = '';
name = fixedName + name;
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name)
{
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
function eraseCookie(name)
{
createCookie(name, "", -1);
}

Cuts off form data when setting url as value

This script creates a cookie depending on form data, (ex: ?docname=My Document)
<script type="text/javascript">
{
var docname = getValue("docname"); // these go off another script to get form data
var save = getValue("save");
var url = window.location.href;
}
function setCookie(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 saveDoc() {
if (docname != '') {
setCookie(docname,url,730);
}
else {
// Nothing else to do
}
}
// Helps to find errors if they exist
window.onerror = function(errorMessage, url, line) {
var errorText = 'message: ' + errorMessage + '\nurl: ' + url + '\nline: ' + line + ' please contact us, and report this error.';
alert(errorText);
}
</script>
It creates the cookie and sets the name of it as the docname variable, but when it sets the url as the value, it cuts off the form data.
I've researched and changed the code but couldn't find an answer, can anyone help?
Solution
<script type="text/javascript">
{
var docname = getValue("docname"); // these go off another script to get form data
var save = getValue("save");
var url = window.location.href;
var recode = encodeURIComponent(url);
}
function setCookie(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 saveDoc() {
if (docname != '') {
setCookie(docname,recode,730);
}
else {
// Nothing else to do
}
}
// Helps to find errors if they exist
window.onerror = function(errorMessage, url, line) {
var errorText = 'message: ' + errorMessage + '\nurl: ' + url + '\nline: ' + line + ' please contact us, and report this error.';
alert(errorText);
}
</script>
changed the variable used to set the value to recode and set recode equal to encodeURIComponent(url); so it decodes the url, decoding it and making it possible to have form data in a value or name of a cookie, etc. Thanks to #epascarello
encodeURIComponent() is your friend here
document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
and when you get it, you need to decode it with decodeURIComponent().

Trying to create cookies in JavaScript

I am trying to save cookies in JavaScript and then display them on the page again but for some reason my setCookies function and displayCookies function is not working properly.. I want it to also expire after 1 week. It is coming from a form and when I put it in Web Developer in FireFox it says Reference Error setCookies and displayCookies is not defined. My jsfiddle is : http://jsfiddle.net/FmXJW/
function setCookies()
{
// this function will set cookies for each field in the reservation form, and set them to expire after one day
var Name = document.forms[0].txtName.value;
var Address = document.forms[0].txtAddress.value;
var City = document.forms[0].txtCity.value;
var State = document.forms[0].txtState.value;
var Zip = document.forms[0].txtZip.value;
var Email = document.forms[0].txtEmail.value;
var CarType = document.forms[0].txtCarType.value;
var PickupDate = document.forms[0].txtPickupDate.value;
var ReturnDate = document.forms[0].txtReturnDate.value;
var myDate = newDate();
myDate.setDate(myDate.getDate() + 7);
document.cookie = "name=" + encodeURIComponent(Name) + "; expires=" + myDate.toUTCString();
document.cookie = "address=" + encodeURIComponent(Address) + "; expires=" + myDate.toUTCString();
document.cookie = "city=" + encodeURIComponent(City) + "; expires=" + myDate.toUTCString();
document.cookie = "state=" + encodeURIComponent(State) + "; expires=" + myDate.toUTCString();
document.cookie = "zip=" + encodeURIComponent(Zip) + "; expires=" + myDate.toUTCString();
document.cookie = "email=" + encodeURIComponent(Email) + "; expires=" + myDate.toUTCString();
document.cookie = "carType=" + encodeURIComponent(CarType) + "; expires=" + myDate.toUTCString();
document.cookie = "pickupDate=" + encodeURIComponent(PickupDate) + "; expires=" + myDate.toUTCString();
document.cookie = "returnDate=" + encodeURIComponent(ReturnDate) + "; expires=" + myDate.toUTCString();
window.alert ("Your reservation has been saved.");
} // end function setCookies()
function displayCookies()
{
// this function will read the saved cookies, and repopulate the form with the cookie values
var cookieString = decodeURIComponent(document.cookie);
var cookieArray = cookieString.split("; ");
if (document.cookie == 0)
{
alert("You have not made a reservation");
}
else
{
// retrieve each cookie, and display the cookie value in the appropriate form field
document.forms[0].txtName.value = cookieArray[0].lastIndexOf("=") + 1);
document.forms[0].txtAddress.value = cookieArray[1].lastIndexOf("=") + 1);
document.forms[0].txtCity.value = cookieArray[2].lastIndexOf("=") + 1);
document.forms[0].txtState.value = cookieArray[3].lastIndexOf("=") + 1);
document.forms[0].txtZip.value = cookieArray[4].lastIndexOf("=") + 1);
document.forms[0].txtEmail.value = cookieArray[5].lastIndexOf("=") + 1);
document.forms[0].txtCarType.value = cookieArray[6].lastIndexOf("=") + 1);
document.forms[0].txtPickupDate.value = cookieArray[7].lastIndexOf("=") + 1);
document.forms[0].txtReturnDate.value = cookieArray[8].lastIndexOf("=") + 1);
}
} // end function displayCookies()
You have a couple of problems on your code:
You are not retrieving the value from the different fields stored on the cookie correctly, you need to use slice to get the right part.
I also guess the line var myDate = newDate(); should be var myDate = new Date();.
I have changed your fiddle (find it here) and loaded the code in <head> and now it seems to save and display the cookies correctly.

Categories