Bootstrap tour needs to clear cache to work again

Question

I am trying to use bootstrap tour in my web application. Everything worked fine at the first 5 minutes and I saw the popup steps, the first time and the only time. Then the popups just disappeared later. I tried many methods even restarted the pc, and it turned out that every time I clear the browser cache, it works once. Then I need to clear the cache again.

The code look like this:

    helpButton.click(function() {
    if (window.steps === undefined)
        return;
    alert("element: " + window.steps[0].element + ", title: " + window.steps[0].title + ", content: " + window.steps[0].content + ", val: " + $(window.steps[0].element).val());
    var tour = new Tour({
        steps: window.steps
    });
    tour.init();
    tour.start();
    alert("finished.");
});

And steps look like:

<script type="text/javascript">
var steps = [
    { element: "#choose-team", title: "快速编辑", content: "可以在这里直接编辑标题，自动保存", position: "n" },
    { element: ".hidden-editor:first", title: "快速编辑2", content: "可以在这里直接编辑标题，自动保存2", position: "n" }
];

1. All the alert() are fine, and data in steps are all right (that's why it can run at least once).
2. All official examples are fine on their website.
3. Both IE and Chrome have the same problem on my PC.
4. Tour js and css are intact (downloaded from Bootstraptour.com).

Any idea? thanks.

Answer 1

The issue is related to the libraries configuration as it stores data to a DOM Storage Interface by default.

DOCS

Option: storage

Default: window.localStorage

Description:

The storage system you want to use. Could be the objects window.localStorage, window.sessionStorage or your own object. You can set this option as false to disable storage persistence (the tour starts from beginning every time the page is loaded).

FIX

var tour = new Tour({
    steps: window.steps,
    storage: false
});

Answer 2

I Just found another way to walk around the problem, if storage is a must. Use restart() instead of start() can solve the problem as well. And there is a start(true) instead of restart(), but it jump to the last step directly.

It sounds like this tour, be default, is designed to work as an one-time tour. For example, when something on your website is updated, the tour should automatically run once to show the update, and will will never bother the user again.

To make it a repeatable tour, disable the storage by "storage: false" in option, or use restart() instead of start().

Answer 3

If you want to Run continuously. Create instance like this

    var tour = new Tour({
    storage: false,
    steps: [],
});

Then call these function on some button click.

$(document).ready(function(){
        $('#tour').click(function(){
            tour.init();
            tour.restart();
        });
    });