Store multiple key value pairs in a cookie

Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2015/02/store-multiple-key-value-pairs-in-cookie.html

In this video we will discuss, if it’s possible to store multiple key value pairs in a cookie. Let us understand this with an example.

When we click “Set Cookie” button, we want to store name, email & gender along with their values in the cookie.

Copy and paste the following code in HTMLPage1.htm
[html]
[head][/head]
[body]
[table border=”1″]
[tr]
[td]
Name
[/td]
[td]
[input type=”text” id=”txtName” /]
[/td]
[/tr]
[tr]
[td]
Email
[/td]
[td]
[input type=”text” id=”txtEmail” /]
[/td]
[/tr]
[tr]
[td]
Gender
[/td]
[td]
[input type=”text” id=”txtGender” /]
[/td]
[/tr]
[tr]
[td colspan=”2″]
[input type=”button” value=”Set Cookie” onclick=”setCookie()” /]
[input type=”button” value=”Get Cookie” onclick=”getCookie()” /]
[input type=”button” value=”Clear” onclick=”clearTextBoxes()” /]
[/td]
[/tr]
[/table]
[script type=”text/javascript”]

function setCookie()
{
var cookieString = “name=” + document.getElementById(“txtName”).value +
“;email=” + document.getElementById(“txtEmail”).value +
“;gender=” + document.getElementById(“txtGender”).value;

document.cookie = cookieString;
}

function getCookie()
{
alert(document.cookie);
}

function clearTextBoxes()
{
document.getElementById(“txtName”).value = “”;
document.getElementById(“txtEmail”).value = “”;
document.getElementById(“txtGender”).value = “”;
}
[/script]
[/body]
[/html]

1. Run the application.
2. Fill in data for Name, Email and Gender.
3. Click “Set Cookie” button
4. Click “Get Cookie” button

Notice that we only get the first key-value pair. This is because you can only store one key-value pair in one cookie
name=Venkat

If you want to store all the 3 key-value pairs, you have 2 options
1. Create a custom object, serialize the object to a JSON string and store the serialized string in a cookie
2. Use a different cookie for each key-value pair you want to store

Create a custom object, serialize the object to a JSON string and store the serialized string in a cookie :

Modify the code in setCookie() function as shown below.

function setCookie()
{
var customObject = {};

customObject.name = document.getElementById(“txtName”).value;
customObject.email = document.getElementById(“txtEmail”).value;
customObject.gender = document.getElementById(“txtGender”).value;

var jsonString = JSON.stringify(customObject);

document.cookie = “cookieObject=” + jsonString;
}

JSON.stringify() method converts a JavaScript object to a JavaScript Object Notation (JSON) string.

Modify the code in getCookie() function as shown below.

function getCookie()
{
var nameValueArray = document.cookie.split(“=”);

var customObject = JSON.parse(nameValueArray[1]);

document.getElementById(“txtName”).value = customObject.name;
document.getElementById(“txtEmail”).value = customObject.email;
document.getElementById(“txtGender”).value = customObject.gender;
}

JSON.parse() method parses a JSON string and returns the corresponding object.

In our next video we will discuss the second option, i.e using a different cookie for each key-value pair that we want to store.

source