JavaScript Tutorial - 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 Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 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.