JS Cookie Save/recieve

[kirtangl]

Hi Guys

Just have a little scrpt i got from somwhere a while ago, jsut want to know if its possible to change it a little, It currently saves all test in textboxes or <input type=text> boxes, prints it to a text box, than retrieves it if the page crashes or any thing, just wondering if i can get it to also do this for textboxes ie <textbox></textbox> inputs?


I have a feeling its somthing to do with this line

if (el.type == 'text') {

And here is the whole script

/**
* Set a cookie
* @param string cookie name
* @param string cookie value
* @param string cookie expiration counter in days
* @param string cookie path
* @param string cookie domain
* @param bool secure?
*/
function setCookie( name, value, expires, path, domain, secure ) {
	var today = new Date();
	today.setTime( today.getTime() );
	if ( expires ) {
		expires = expires * 1000 * 60 * 60 * 24;
	}
	var expires_date = new Date( today.getTime() + (expires) );
	document.cookie = name+"="+escape( value ) +
		( ( expires ) ? ";expires="+expires_date.toGMTString() : "" ) +
		( ( path ) ? ";path=" + path : "" ) +
		( ( domain ) ? ";domain=" + domain : "" ) +
		( ( secure ) ? ";secure" : "" );
}

/**
* Get a cookie value
* @param string cookie name
*/
function getCookie( name ) {
	var start = document.cookie.indexOf( name + "=" );
	var len = start + name.length + 1;
	if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
		return null;
	}
	if ( start == -1 ) return null;
	var end = document.cookie.indexOf( ";", len );
	if ( end == -1 ) end = document.cookie.length;
	return unescape( document.cookie.substring( len, end ) );
}

/**
* Remebers form inputs after you fill them in
* @param string a prefix to prepend to all cookie names. (prevent naming conflicts)
*/
function rememberFormInputs(form_id, prefix) {
	// get a reference to the form element with id 'form_test'
	var form = document.getElementById(form_id);
	// get all child input elements of the form
	var els = document.getElementsByTagName('input');
	// iterate through all form child input elements
	for (var i = 0; i < els.length; i++) {
		// this is the element with index of i
		var el = els.item(i);
		// make sure this is a text input field
		if (el.type == 'text') {
		
			// event handler to catch onblur events
			// it sets the cookie values each time you move out of an input field

			el.onblur = function() {
				// this is the name of the input field
				var name = this.name;
				// this is the value of the input field
				var value = this.value;
				// set the cookie
				setCookie( prefix + name, value);
				alert('setCookie: '+name + ' = '+value);
			};
			
			// this inserts all the remembered cookie values into the input fields
			var old_value = getCookie(prefix + el.name);
			if (old_value && old_value != '') {
				alert('old value remembered: '+old_value);
				el.value = old_value;
			}
		}
	}
}

// function will be run after window/document loads
window.onload = function() {
	rememberFormInputs('form_test', 'input-');
}

// overload alert
function alert(str) {
	var el = document.getElementById('alert');
	if (el) {
		el.value += str+"\r\n";
	}
}

thank you
kirt

[jscheuer1]

You must mean a textarea, right? In theory, yes. In fact, probably not. The code change could be as simple as from:

if (el.type == 'text') {

to:

if (el.type == 'text' || (el.tagName && /textarea/i.test(el.tagName))) {

The problem would be in the limitations of cookies. I think it varies by browser, but one source I just Googled seemed to indicate that 3000 8 bit characters (mostly just letters and numbers, spaces, dashes, ordinary characters, not high Unicode ones) would be about the most one could expect, as a conservative estimate - taking into account the browsers with the least capacity.

This is a good amount of data, more than enough for text inputs in most cases, but could fill up rather quickly if textareas were used.

[jscheuer1]

3000 characters:

kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

[kirtangl]

that kinda Sux, and that code didn't seem to save the text area to cookies ither, it the textarea supposed to have a certain name?

If it dont work, Ill have to make my own browser lol...

[jscheuer1]

Well yes, a textarea would still need a unique name, just like a text input would. But I did say:

The code change could be as simple as

I didn't really look at the code in enough detail to be certain of this though, because once I saw the limitations of cookies, it seemed pointless.

Looking at things a bit more, if you want to play with this idea, just to see how much data it takes for it to barf, and in which browsers, more than just that one simple change would need to be made.

I'll test it out and let you know.

[jscheuer1]

OK, here you go, have fun:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
/**
* Set a cookie
* @param string cookie name
* @param string cookie value
* @param string cookie expiration counter in days
* @param string cookie path
* @param string cookie domain
* @param bool secure?
*/
function setCookie( name, value, expires, path, domain, secure ) {
	var today = new Date();
	today.setTime( today.getTime() );
	if ( expires ) {
		expires = expires * 1000 * 60 * 60 * 24;
	}
	var expires_date = new Date( today.getTime() + (expires) );
	document.cookie = name+"="+escape( value ) +
		( ( expires ) ? ";expires="+expires_date.toGMTString() : "" ) +
		( ( path ) ? ";path=" + path : "" ) +
		( ( domain ) ? ";domain=" + domain : "" ) +
		( ( secure ) ? ";secure" : "" );
}

/**
* Get a cookie value
* @param string cookie name
*/
function getCookie( name ) {
	var start = document.cookie.indexOf( name + "=" );
	var len = start + name.length + 1;
	if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
		return null;
	}
	if ( start == -1 ) return null;
	var end = document.cookie.indexOf( ";", len );
	if ( end == -1 ) end = document.cookie.length;
	return unescape( document.cookie.substring( len, end ) );
}

/**
* Remebers form inputs after you fill them in
* @param string a prefix to prepend to all cookie names. (prevent naming conflicts)
*/
function rememberFormInputs(form_id, prefix) {
	// get a reference to the form element with id 'form_test'
	var form = document.getElementById(form_id);
	// get all child input elements of the form
	var els = form.elements;
	// iterate through all form child input elements
	for (var i = 0; i < els.length; i++) {
		// this is the element with index of i
		var el = els.item(i);
		// make sure this is a text input field
		if (el.type && el.type == 'text' || el.tagName && /textarea/i.test(el.tagName)) {
		
			// event handler to catch onblur events
			// it sets the cookie values each time you move out of an input field

			el.onblur = function() {
				// this is the name of the input field
				var name = this.name;
				// this is the value of the input field
				var value = this.value;
				// set the cookie
				setCookie( prefix + name, value);
				alert('setCookie: '+name + ' = '+value);
			};
			
			// this inserts all the remembered cookie values into the input fields
			var old_value = getCookie(prefix + el.name);
			if (old_value && old_value != '') {
				alert('old value remembered: '+old_value);
				el.value = old_value;
			}
		}
	}
}

// function will be run after window/document loads
window.onload = function() {
	rememberFormInputs('form_test', 'input-');
}

// overload alert
function alert(str) {
	var el = document.getElementById('alert');
	if (el) {
		el.value += str+"\r\n";
	}
}
</script>
</head>
<body>
<form action="#" onsubmit="return false;" id="form_test">
<input type="text" name="bob"><br>
<textarea name="sid" cols="50" rows="5" wrap="virtual"></textarea>
</form>
</body>
</html>

There will be problems if you go over a particular browser's limits on cookie data. There may be other problems, I didn't do extensive testing. However, the above demo does work.

[kirtangl]

Sorry for late reply, been away, thanx alot for this mate, ill test it out and see how it goes, 3000 characters hey.... i dont suppose theres another way to store characters? other than cookies...

[jscheuer1]

i dont suppose theres another way to store characters? other than cookies...

Not with javascript alone. The best adjunct in such a situation would be a server side data base or file. This would require a host with PHP, asp or other server side language enabled. And it is a bit beyond my expertise and the topic of this section of the forum, which is javascript.

If you do have a host with a server side language available, you could use that, and ask about how in one of the other sections of this forum that deal with that server side language.

Also, once you go over to the server side for this, you might find that it is easier, and/or better, to just do it all on the server side.