title: Create breadcrumbs dynamically on client side using javascript
body: <p>I want to create <strong>breadcrumbs dynamically on client side using java script</strong>. The breadcrumbs will be the <strong>path followed by user</strong> while navigation as:
  <strong>Home > about us > our history..</strong></p>
  
  <p>The anchor tags will be generated on each page in the sequence in which the user navigate.</p>
  
  <p>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.</p>
  
  <p>Some logic in my mind is as: </p>
  
  <ol>
  <li><p>Create an <strong>object type variable</strong> in java script with a <strong>name</strong>
  and <strong>value pair</strong> where <strong>name</strong> is the <strong>name of current</strong> page
  and <strong>value</strong> is the <strong>url of that page</strong>.  </p></li>
  <li><p>Now pass this object
      variable using <strong>query string</strong> while navigating from one page to
      other.</p></li>
  <li><p>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). </p></li>
  <li><p>Again when user goes to another page <strong>add the name and value pairs</strong>
  for all the <strong>previous pages</strong> along with the <strong>name and value pair</strong> for current page at the last in the <strong>object variable</strong> and pass it to next page
  using <strong>query string</strong>. </p></li>
  <li><p>Now in next page <strong>do the same</strong> and create anchors.</p></li>
  </ol>
  
  <p>Some what similar I got <a href="http://jsfiddle.net/JcZun/1/" rel="noreferrer">here</a> using html5 client side storage as:
  <strong>html:</strong></p>
  
  <pre><code>&lt;ul id="navigation_links"&gt;
      &lt;li&gt;Page1&lt;/li&gt;
      &lt;li&gt;Page2&lt;/li&gt;
      &lt;li&gt;Page3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>js:</strong></p>
  
  <pre><code>$(document).ready(function(){
      bindEventToNavigation();
  });
  
  function bindEventToNavigation(){
      $.each($("#navigation_links &gt; li"), function(index, element){
          $(element).click(function(event){
              breadcrumbStateSaver($(event.currentTarget).html());
              showBreadCrumb();
          });
      });
  }
  
  
  function breadcrumbStateSaver(text){
      //here we'll check if the browser has storage capabilities
      if(typeof(Storage) != "undefined"){
          if(sessionStorage.breadcrumb){
              //this is how you retrieve the breadcrumb from the storage
              var breadcrumb = sessionStorage.breadcrumb;
             sessionStorage.breadcrumb = breadcrumb + " &gt;&gt; "+text;
          } else {
             sessionStorage.breadcrumb = ""+text; 
          }
      }
      //if not you can build in a failover with cookies
  }
  
  function showBreadCrumb(){
       $("#breadcrumb").html(sessionStorage.breadcrumb);   
  }
  &lt;div id="breadcrumb"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>but here instead of creating hyperlinked anchors it is creating simple text, whereas I want the breadcrumbs to be anchors and hyperlinked to their respective pages.</p>
  
  <p>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.</p>
  
  <p>thanks in advance.</p>