Create breadcrumbs dynamically on client side using javascript

I want to create breadcrumbs dynamically on client side using java script. The breadcrumbs will be the path followed by user while navigation as: Home > about us > our history..

The anchor tags will be generated on each page in the sequence in which the user navigate.

Now I can create these breadcrumbs using server side technology easily but I want to generate it dynamically on each page on client side. Now I don't know exactly how to implement it.

Some logic in my mind is as:

1. Create an object type variable in java script with a name and value pair where name is the name of current page and value is the url of that page.

2. Now pass this object variable using query string while navigating from one page to other.

3. Then in the second page get that object variable from query string and extract the name and value pair from that object and then using that create the anchor and add it to targeted div (place holder).

4. Again when user goes to another page add the name and value pairs for all the previous pages along with the name and value pair for current page at the last in the object variable and pass it to next page using query string.

5. Now in next page do the same and create anchors.

Some what similar I got here using html5 client side storage

but here instead of creating hyperlinked anchors it is just creating simple text, whereas I want the breadcrumbs to be anchors and hyperlinked to their respective pages.

I am new to java script and don't know how to implement this. If you have any better logic and solution for this please tell me.

thanks in advance.