JS: Multiple Lines in a Cookie

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.