cookie string and inserting info into text boxes - javascript

I have about 88 input boxes that I would like to have cookies repopulate onload. I have looked everywhere and cant find anything that works. I cant set one value per cookie because I have too many input boxes. All the data is less than 4000bytes. I want to break up the input values to about 20 values per cookie. So far this is all I have which isnt much. I think I need another piece of code to save the cookie string and another one to break up the cookie string and repopulate the input boxes (document.formname.inputname.value). Can someone tell me what I need here? A working piece of code would probably be best that I can just add all the document.formname.inputname.values since I dont really understand the cookie functions. I dont need the erasecookie function. Thanks.
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 = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=",
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;
}

Related

JavaScript set cookies

I'm a bit stuck on some javascript. So the script below sets eith one of two cookies.
If the page contains 'lpt' and a cookie called organic doesn't exist (not sure if the second part actually works) then create a cookie. Otherwise create a different one.
Problem is which ever cookie is created needs to be held and not swap them out? ie if the first one is created don't ever create the other one.
if(document.URL.indexOf("lpt") >= 0 && document.cookie.indexOf("organic") < 0){
document.cookie = "ppc_campaign=this will be the url; expires=Thu, 18 Dec 2018 12:00:00 UTC; path=/";
}
else {
document.cookie = "organic=this will be the url; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
}
You dont want to dublicate the cooke if it is already created
set expiry date for almost 10years, 2050 or 2030 Then use this function to find if cookie already exists
document.cookie.search('cookie')
if this function returns -1
then save your cookie
may be this function will help you to find your cookie in easiest way just passing your name of cookie... you can modify according to your logic
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(cookiename) {
var user = getCookie(cookiename);//cookiename="username"
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}

jquery plugin to manage cookies

I have to create, update, delete, get the cookies in my project for different products. So is there any jquery plugin for this. Now i am using this to mange cookies in my project.
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 = "";
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);
}
I need a plugin for this which can also update the previous cookie with new product and their value.
There are several plugins for jQuery cookies. You may try https://github.com/carhartl/jquery-cookie or https://plugins.jquery.com/cookie/ or just Google it. and find many other plugins.

Show loading animation only on first time page load using Cookies?

I have loading animation on my HTML page and it is working absolutely fine. The problem is whenever page gets refreshed, the loading animation appears again and I want to limit it to only first time page load.
I was using cookies to solve the problem and I took reference from one of stackoverflow questions:
load an ad (div) just once on first load. I was using the exact same code which is answered there, just replaced my id.
$(document).ready(function() {
if (!readCookie("adSeen")) {
$("#loading").fadeOut("slow");
createCookie("adSeen", "1", 1000);
}});
Rest of the code is same. My cookies are enable, but it is not working. Help me to fix it.
Here's my code: https://jsfiddle.net/mytest_jsfiddle/ojo2mosd/5/
Change your code to
$(document).ready(function() {
if (!readCookie("adSeen")) {
$("#loading").fadeIn("slow");
createCookie("adSeen", "1", 1000);
}
});
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 = "";
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;
}
For reference, Please refer to the below fiddle:
https://jsfiddle.net/aman_chhabra/fguq4hnd/1/
Hope that helps.

How do I store and then retrieve a link to an image in a cookie?

I would like to be able to show a user a picture from one form page to the next. The picture will be dynamic based on what he or she is doing. So, I need to store the path link to that image in a cookie and then load that image on the next page.
How do I do that?
Check the plugin: https://github.com/carhartl/jquery-cookie
and then do:
$.cookie("img", img_url);
[OR]
You can set and get cookie using these functions: (From Quirksmode)
function createCookie(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 = escape(name) + "=" + escape(value) + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = escape(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 unescape(c.substring(nameEQ.length, c.length));
}
return null;
}
Use document.cookie to set and get the image URLs.
check this cite for details: w3Schools
It shows that you didn't do much research on this simple thing.
Here's a very simple JSFiddle: fiddle
// Assign the cookie
document.cookie = "imgpath=/your/image.png";
alert(document.cookie);
// Use a regular expression to get the path from the entire cookie string. Sanitizations are left up to you.
var imgPath = /imgpath=([^;]+)/i.exec(document.cookie)[1];
alert(imgPath);
I suggest using the jQuery.cookie plugin mentioned in the other answers though, no need to make it any harder than it already is.
Here is the regular expression explained: http://regex101.com/r/qH6rB5/1 - it shows how the actual value you are interested in, is captured.

preserving the state using javascript and jquery

I having problem figuring howto preserve the present state ...Let say I have selected radio button and checkbox in present form and navigate way to a different page but if I want to go back to old page how should I able to see the selected radio and checkboxes in my previous page..
Well you can use cookies to do the same. here is a small code snippet that acts over cookies:
var myCookieHandler = (function () {
return {
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();
}
document.cookie = name + "=" + value + expires + "; path=/";
},
readCookie: function (name) {
var nameEq = name + "=";
var ca = document.cookie.split(';');
var i;
for (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;
},
deleteCookie: function (name) {
this.createCookie(name, null, -1);
}
};
}());
usage:
myCookieHandler .writeCookie("Login","true",2);
var cookieValue=myCookieHandler.readCookie("Login");
myCookieHandler.deleteCookie("Login");
Thus when you come back to this page you read your cookie and do the necessary with the same.
Hope this helps..

Categories