Results 1 to 8 of 8

Thread: JS Cookie Save/recieve

  1. #1
    Join Date
    Jun 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default JS Cookie Save/recieve

    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
    Code:
    if (el.type == 'text') {

    And here is the whole script

    Code:
    /**
    * 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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    3000 characters:

    kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jun 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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...

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, here you go, have fun:

    Code:
    <!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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jun 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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...

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by kirtangl View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •