Adding a cookie to my HTML page?

Question

I have looked around stackoverflow for an answer to my question, but I dont totally understand them or they dont work for me. I am creating an address book for an assignment and I want to be able to keep the names of the people I add without using a data base. I want to be able to make a cookie that can store the info of the person. This is my assignment so far: http://pastebin.com/4vX2h0A0 Its nothing special, but i would really appreciate if someone could help :D

Answer 1

I have used this example in following way, it can be very helpfull for you.

<script type="text/javascript">

function WriteCookie()
{
   if( document.searchrecord.search.value == "" ){
       alert("Enter some value!");
      return;
   }

   cookievalue= escape(document.searchrecord.search.value) + ";";
   document.cookie="name=" + cookievalue;
   alert("Setting Cookies : " + "name=" + cookievalue );
}

function ReadCookie()
{
   var allcookies = document.cookie;
   alert("All Cookies : " + allcookies );

   // Get all the cookies pairs in an array
   cookiearray  = allcookies.split(';');

   // Now take key value pair out of this array
   for(var i=0; i<cookiearray.length; i++){
      name = cookiearray[i].split('=')[0];
      value = cookiearray[i].split('=')[1];
      alert("Key is : " + name + " and Value is : " + value);
   }
}

This is the html form:

<form name="searchrecord" method="get" id="category" action="" onsubmit="WriteCookie()">
        <b>Search By Category :- </b>
        <select name="search" style="width:145px;">
                    <option value="Today's Deals">Today's Deals</option>
                    <option value="Laptop">Laptop</option>
                    <option value="TV" >TV</option>
                    <option value="Tablet">Tablet</option>
        </select>
        <input type="submit" name="btn" value="Search" onclick="ReadCookie()"/>

</form>

Answer 2

I think you will probably find this a good read: http://www.w3schools.com/js/js_cookies.asp

You can set and retreive cookies via Javascript which I think is what you are trying to do. Look at the W3C resource and you should be good to go.

Really quick overview:

document.cookie = "key=value";
var x = document.cookie;
console.log(x);

This should output to your console "Your cookie value." GO ahead and read up and give it a shot. Keep in mind that if you continue to set document.cookie values it will append to the value there and when you do the var x = document.cookie; you will get everything. You will have to parse it yourself but the W3C resource provides a nice function to help you out!

Good luck!

Answer 3

You could always just do:

document.cookie="addressBook=..."

You'd probably want to do something like JSON.stringify() on your object containing the address book, then add it to the cookie. When you read it just do JSON.parse() on it.

But you might look at local storage instead: localStorage array of objects handling