Bootstrap Tour doesn't remember where I left

Question

I'm having trouble initiating Bootstrap Tour on a multipage tour once I get to the second page.

I have the tour start with a click event and localStorage is set to false. The tour starts fine with the click event but then, when I go to the second step of the tour and load a new page, the tour does not pick up where it left off.

How do I go about resuming the tour from Step two on this new page? I know I need to re-initialize the tour, but I am apparently not doing this correctly.

$(document).ready(function () {
    // Instance the tour
    var tour = new Tour({
        name: "CiteTour",
        steps: [{
            element: "",
            title: "#1",
            content: "You can find help with formatting citations on the Guide page. Click 'Next' to go there now.",
            placement: ""
        }, {
            element: "#CiteTour2",
            title: "#2 - Citation Resources",
            content: "There are several options for getting help with formatting citations. Once on the Guide page, look for the box labeled 'Citation Help.'",
            placement: "right",
            path: "/newpath",
            onNext: function (tour) {
                tour.init();
                tour.restart();
            }
        }, {
            element: "#CiteTour3",
            title: "#3",
            content: "This site can help format your research paper and references in APA, MLA, and the other major citation formats.",
            placement: "right",
        }, {
            element: "#AskTour1",
            title: "#4 - Ask-a-Librarian",
            content: "If you still have questions about citations or citation format, feel free to contact the librarians.  Good luck!",
            placement: "left",
        }],
        storage: false,
    });

    // Initialize the tour
    tour.init();
    $('#CiteTour-go').on('click', function () {
        // Start the tour
        tour.start();
    });
});

Answer 1

Specifically for SPAs built with Angular

The fantastic answer by @KyleMit helped me a lot: I followed all three recommendations, but the tour did not continue. I believe that bootstrap-tour still has a problem with single-page applications.

Since I'm using Angular on an SPA, it's actually the same "web page" but different Angular "views". The tour didn't continue…

Until I added a $(window).resize(); to my fixed navbar's controller. The navbar is fixed at the top of the screen. Therefore, the controller is instantiated once. And I already had a location change handler:

$scope.$on("$locationChangeSuccess", $scope._handleLocationChange);

A hint to that "solution" was the fact that I happened to press F12 to view console messages in the (docked) Firebug panel, and lo and behold, the tour continued! I checked and it would continue when I closed or opened the Firebug panel. I still can't figure out why resize is necessary but it is innocuous in the context of my app and I need to move on, after so much time spent on this issue. Remove the call to resize and the tour won't continue after the redirection. Add it back, and the tour will continue as intended.

I had "basePath": "/app/#" in the configuration of the tour, which spans only two views. Paths were like "path": "/" (for the "home" view) and "path": "/show/chair" (a typical view in the application).

I'm using Angular 1.4.8 on this app.

HTH.