Créer de la chapelure de manière dynamique côté client à l'aide de javascript

Je veux créer de la chapelure de manière dynamique côté client à l'aide de java script. Le fil d'ariane sera le chemin suivi par l'utilisateur tandis que la navigation:
Accueil > a propos de nous > notre histoire..

L'ancre balises seront générés sur chaque page dans l'ordre dans lequel l'utilisateur de naviguer.

Maintenant, je peux créer ces chapelure à l'aide de server côté de la technologie, facile, mais je veux générer dynamiquement sur chaque page côté client.
Maintenant, je ne sais pas exactement comment la mettre en œuvre.

Un peu de logique dans mon esprit, c'est que:

1. Créer un objet de type variable en java script avec un nom
   et valeur paire où nom est le le nom de l'actuel page
   et valeur est le url de la page.
2. Maintenant passer à cet objet
   variable à l'aide de chaîne de requête lors de la navigation d'une page à l'
   d'autres.
3. Puis dans la deuxième page obtenir cet objet variable de chaîne de requête
   et extraire le nom et la valeur de la paire à partir de cet objet, puis à l'aide de
   que créer l'ancre et l'ajouter à ciblées div (place de titulaire).
4. De nouveau lorsque l'utilisateur passe à une autre page ajouter le nom et la valeur des paires
   pour tous les pages précédentes avec le le nom et la valeur de la paire de de la page actuelle à la dernière dans la variable objet et passer à la page suivante
   à l'aide de chaîne de requête.
5. Maintenant dans la page suivante faire de même et de créer des ancres.

Qu'un peu similaire, je suis ici à l'aide de html5 côté client de stockage:
html:

<ul id="navigation_links">
    <li>Page1</li>
    <li>Page2</li>
    <li>Page3</li>
</ul>

js:

$(document).ready(function(){
    bindEventToNavigation();
});

function bindEventToNavigation(){
    $.each($("#navigation_links > 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 + " >> "+text;
        } else {
           sessionStorage.breadcrumb = ""+text; 
        }
    }
    //if not you can build in a failover with cookies
}

function showBreadCrumb(){
     $("#breadcrumb").html(sessionStorage.breadcrumb);   
}
<div id="breadcrumb"></div>

mais ici, au lieu de créer des hyperliens des ancres c'est la création d'un simple texte, alors que je veux la chapelure pour être ancres et un lien vers leurs pages respectives.

Je suis nouveau sur le java script et je ne sais pas comment le mettre en œuvre.
Si vous avez mieux à la logique et à la solution pour cela merci de me le dire.

merci d'avance.

OriginalL'auteur Saurabh Palatkar | 2013-09-25