Coming 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.
<!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’
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 < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') 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,"",-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 <br> tags.
function encodeTA()
{
var big_string = document.ExampleForm.TxtIn.value; //Get the value that we want to encode
createCookie('multiline', big_string.replace(/\r\n|\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<br> tags with line endings.
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. For this and more, download the example below.
Tags: cookies, javascript, php, replace