JS: Multiple Lines in a Cookie

028th Aug 2010Various, , ,

JavaScriptComing from my buddy Shawn over at Lyme Team is an easy way to store multiple lines of data in a single cookie!

First we’ll start off with our HTML. This is an example template from which we’ll work.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Multi-line cookie example</title>
</head>
<body>
<h1>Multi-line cookie example</h1>
<form name="ExampleForm">
<table>
<tr>
<td>
Text to be stored in a cookie:<br />
<textarea name="TxtIn">
this is some
example text
</textarea>
</td>
<td>
Data Stored in cookie:<br />
<textarea name='RawOut'></textarea><br />
Decoded data from cookie:<br />
<textarea name='TxtOut'></textarea><br />
</td>
</tr>
<tr>
<td>
<input type="button" value="Encode" />
<input type="button" value="Decode" />	
</td>
</tr>
</table>
</form>
</body>
</html>

Now that we have our template, we can dive in to the JavaScript.

We’ll start with a few generic methods to control our cookie, and we’re going to put these in ‘cookie.js’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 &lt; ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==&#039; &#039;) 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,&quot;&quot;,-1);
}

Since these aren’t the meat of the magic, I won’t explain their function. The names should be self-explanatory.

Now the good stuff.

Starting with our function to encode the value for storage in to a cookie. encodeTA{} is a simple function which takes the value of our textarea above(TxtIn), and replaces all of the line endings with
tags.

1
2
3
4
5
function encodeTA()
{
var big_string = document.ExampleForm.TxtIn.value; //Get the value that we want to encode
createCookie('multiline', big_string.replace(/rn|r|n/g, '<br />'), 1); // This will replace line endings with a <br />
}

On the other side, decodeTA{} takes the output from encodeTA{}, which comes from the cookie, and replaces all those lovely
tags with line endings.

1
2
3
4
5
6
function decodeTA()
{
var txt = readCookie('multiline'); //Read in our cookie
document.ExampleForm.RawOut.value = txt; //Display the cookie's value in it's raw form.
document.ExampleForm.TxtOut.value = txt.replace(/<br />/g, 'n'); //Now we're going to replace those <br />s with line endings.
}

Now, all that’s left is to modify our HTML to call these functions, and include them in the document. Which I’ll leave up to your own imagination.

No Comments Comments Feed

Add a Comment

Before you post, please prove you are sentient.

what is 2 + 6?