[ acky.net logo ]

IRCd's Starting as Low as $10, Great Reputation
IRCd's Starting as Low as $10, Great Reputation
Home > Tutorials > JavaScripts > Save Form Data With Cookies

Save Form Data With Cookies
By Alex Osipov
LAST EDITED: Monday, April 16, 2001 3:48 AM

   Lets get right into the heart of the script. I will try to go over most of the script and the ideas behind the coding. Here goes the script:

1 <!--
2
3 /*
4
5 Author: Alex Osipov (alex@acky.net)
6 Publisher: ACKY.NET
7
8 */
9
10 // Global variables.
11 domain = '';
12 path = '/';
13 secure = 0;
14
15 // Function to save a field.
16 function save_field(obj) {
17 var cookie_value = '';
18 var objType = new String(obj.type);
19 switch(objType.toLowerCase()) {
20 case "checkbox" :
21 if (obj.checked) cookie_value = obj.name + '=[1]'
22 else cookie_value = obj.name + '=[0]'
23 break;
24 case "undefined" :
25 // a.k.a. radio field.
26 for (var i = 0; i < obj.length; i++) {
27 if (obj[i].checked) cookie_value = obj[i].name + '=[' + i + ']'
28 }
29 break;
30 case "select-one" :
31 cookie_value = obj.name + '=[' + obj.selectedIndex + ']';
32 break;
33 case "select-multiple" :
34 cookie_value = obj.name + '=[';
35 for (var i = 0; i < obj.options.length; i++) {
36 if (obj.options[i].selected) cookie_value += '+' + i
37 }
38 cookie_value += ']';
39 break;
40 default :
41 // We assume all other fields will have
42 // a valid obj.name and obj.value
43 cookie_value = obj.name + '=[' + obj.value + ']';
44 }
45 if (cookie_value) {
46 var expires = new Date();
47 expires.setYear(expires.getYear() + 1);
48 document.cookie = cookie_value +
49 ((domain.length > 0) ? ';domain=' + domain : '') +
50 ((path) ? ';path=' + path : '') +
51 ((secure) ? ';secure' : '') +
52 ';expires=' + expires.toGMTString();
53 }
54 return 1;
55 }
56
57 // Function to retrieve a field.
58 function retrieve_field(obj) {
59 var cookie = '', real_value = '';
60 cookie = document.cookie;
61 var objType = new String(obj.type);
62 if (obj.name)
63 var objName = new String(obj.name);
64 else
65 var objName = new String(obj[0].name);
66 var offset_start = cookie.indexOf(objName + '=[');
67 if (offset_start == -1) return 1;
68 var offset_start_length = objName.length + 2;
69 offset_start = offset_start + offset_start_length;
70 var offset_end = cookie.indexOf(']', offset_start);
71 real_value = cookie.substring(offset_start, offset_end);
72 switch(objType.toLowerCase()) {
73 case "checkbox" :
74 if (real_value == '1') obj.checked = 1
75 else obj.checked = 0
76 break;
77 case "undefined" :
78 obj[real_value].checked = 1;
79 break;
80 case "select-one" :
81 obj.selectedIndex = real_value;
82 break;
83 case "select-multiple" :
84 for (var i = 0; i < obj.options.length; i++) {
85 if ((real_value.indexOf('+' + i)) > -1)
86 obj.options[i].selected = 1;
87 else
88 obj.options[i].selected = 0;
89 }
90 break;
91 default :
92 obj.value = real_value;
93 break;
94 }
95 return 1;
96 }
97 // End JavaScript -->

   Now let us get right into the insides. On lines 10-13 we define global variables that we will later use in saving the cookie. They should correspond to your domain, path, and whether or not the JavaScript will be located on a secure server, and unless they are set the browser will try to determine the best possible match (sometimes not what you actually wanted).

   Now we come to the save_field function. The save_field function takes 1 argument (line 16), an object from a form. The save_field function as you probably already figured out will handle saving the state of the object in the form, as explained earlier. The first thing we do is try to determine what kind of object we are going to deal with, be it a checkbox, radio field, a select field, et al. After we determine this information we go on to handle each individual type of object. After we get the state of the object, we save it in a local variable cookie_value, having the value of the object name, the string "=[" (without the quotes), the object state, and the string "]" (again without quotes). You can see this in action on lines 19-44.

   After this we have all we in order to save the cookie on the users computer so we can later load and parse it out. In order to do this we must first get a properly formatted date string of when the cookie is going to expire. In case you don't know how cookies work here is how everything works. The web browser receives a cookie from a server (in this case, the JavaScript) and after parsing the cookie data it saves the data accordingly. Cookies must be sent in the following form:

Set-Cookie: name=value
[;EXPIRES=dateValue]
[;DOMAIN=domainName]
[;PATH=pathName]
[;SECURE]

   After the cookie has been saved by the web browser every time the user visits the web site that corresponds to the cookie domain, and path it will be sent along with the HTTP headers for a page request. However, cookies also have an expiration date, and if the current date on the user's computer exceeds the cookie date the cookie will be expunged of (think of real cookies that you keep beside the computer and chomp on all night).

 

 

Email This Page To A Friend

Last updated: Monday, November 27, 2006 - 11:02 AM Eastern Daylight Time
Legal | Privacy Statement | Problems & Questions | Advertise | Link to us
© 1997-2007, All Rights Reserved.


Dedicated Server Provided by HighSpeedHosting