我相信我可以第一次登录,只需检查user.sign_in_count< 2,但是我不知道如何仅在第一页上加载加载. 即我不想在用户第一次登录后触发JS,并刷新页面而不注销. 我使用Turbolinks和$(document).on(‘turbolinks：load’,function(){来触发它. 编辑1 所以我想做的是在许多页面上执行Bootstrap Tour.但是我只希望自动执行该游览,在第一页加载.旅游本身将引导用户访问我的应用程序中的其他特定页面,但是每个页面都将在每个页面上都有页面特定的浏览JS.

现在,在我的HTML中我有这样的东西：

<script type="text/javascript">
  $(document).on('turbolinks:load',function() {
      var tour = new Tour({
        storage: false,backdrop: true,onStart: function(){
        $('body').addClass('is-touring');
        },onEnd: function(){
        $('body').removeClass('is-touring');
        },steps: [
        {
          element: "#navbar-logo",title: "Go Home",content: "All throughout the app,you can click our logo to get back to the main page."
        },{
          element: "input#top-search",title: "Search",content: "Here you can search for players by their name,school,positions & bib color (that they wore in our tournament)"
        }
      ]});

      // Initialize the tour
      tour.init();

      // Start the tour
      tour.start();
  });
</script>

所以我真的想做的是：

>在他们重新加载页面时,不要在第一次登录时执行新的游览来轰炸用户.
>允许他们能够通过简单的按一下链接,在以后通过手动执行旅游.
>我不想在我的数据库中存储任何东西,如果我不必 – 所以最好这应该是一个基于cookie的方法或localStorage
>假设我将使用Rails跟踪他们已经完成的登录数量.所以一旦他们登录不止一次,我就不能触发这个JS.

真正的问题是在第一次登录之前,如果他们刷新主页10次,那么这个游览会被执行10次.这就是我想阻止的.

我希望能够提供一些更加清晰的内容.

这是我的理解,你有：

>包含单个旅游的多个页面(每页的旅游都不同)
>一种检测首次登录到帐户的方法(ruby login count)
>根据第一次登录添加脚本值的能力

解决方案概述

以下解决方案使用localStorage来存储每个旅游标识符的关键值对,以及是否已被看到. localStorage在页面刷新和会话之间依然存在,顾名思义,localStorage对于每个域,设备和浏览器都是唯一的(即chrome的localStorage不能访问firefox的本地存储,即使是在同一个域中,也不能在您的笔记本电脑上使用chrome的localStorage访问chrome的localStorage您的手机即使在同一个域).我提出这个,以说明依赖前言3切换JS标志,如果用户以前登录过.

要启动巡视,代码检查localStorage是否对应的键值对未设置为true(表示已被看到).如果确实存在并被设置为true,则巡视不会启动,否则运行.当每个巡视开始时,使用其onStart方法,我们更新/添加巡视的标识符到localStorage并将其值设置为true.

如果您只想执行当前页面的巡视,可以通过手动调用巡视开始方法进行手动执行,否则可以清除与巡视相关的所有localStorage,并将用户发回第一个page /如果你在第一页,再次调用start方法.

JSFiddle(基于HTML所提出的关于旅游的其他问题)

HTML(这可以是具有id =“tourAgain”属性的任何元素,以便以下代码生效.

<buttonid="tourAgain">Take Tour Again</button>

JS

var isFirstLogin = true; // this value is populated by ruby based upon first login
var userID = 12345; // this value is populated by ruby based upon current_user.id,change this value to reset localStorage if isFirstLogin is true
// jquery on ready function
$(function() {
    var $els = {};  // storage for our jQuery elements
    var tour; // variable that will become our tour
    var tourLocalStorage = JSON.parse(localStorage.getItem('myTour')) || {};

    function activate(){
        populateEls();
        setupTour();
        $els.tourAgain.on('click',tourAgain);
        // only check check if we should start the tour if this is the first time we've logged in
        if(isFirstLogin){
            // if we have a stored userID and its different from the one passed to us from ruby
            if(typeof tourLocalStorage.userID !== "undefined" && tourLocalStorage.userID !== userID){
                // reset the localStorage
                localStorage.removeItem('myTour');
                tourLocalStorage = {};
            }else if(typeof tourLocalStorage.userID === "undefined"){ // if we dont have a userID set,set it and save it to localStorage
                tourLocalStorage.userID = userID;
                localStorage.setItem('myTour',JSON.stringify(tourLocalStorage));
            }
            checkShouldStartTour();
        }
    }

    // helper function that creates a cache of our jQuery elements for faster lookup and less DOM traversal
    function populateEls(){
        $els.body = $('body');
        $els.document = $(document);
        $els.tourAgain = $('#tourAgain');
    }

    // creates and initialises a new tour
    function setupTour(){
        tour = new Tour({
            name: 'homepage',// unique identifier for each tour (used as key in localStorage)
            storage: false,onStart: function() {
                tourHasBeenSeen(this.name);
                $els.body.addClass('is-touring');
            },onEnd: function() {
                console.log('ending tour');
                $els.body.removeClass('is-touring');
            },steps: [{
                element: "div.navbar-header img.navbar-brand",content: "Go home to the main page."
            },{
                element: "div.navbar-header input#top-search",positions & bib color (that they wore in our tournament)"
            },{
                element: "span.num-players",title: "Number of Players",content: "This is the number of players that are in our database for this Tournament"
            },{
                element: '#page-wrapper div.contact-Box.profile-24',title: "Player Info",content: "Here we have a quick snapshot of the player stats"
            }]
        });
        // Initialize the tour
        tour.init();
    }

    // function that checks if the current tour has already been taken,and starts it if not
    function checkShouldStartTour(){
        var tourName = tour._options.name;
        if(typeof tourLocalStorage[tourName] !== "undefined" && tourLocalStorage[tourName] === true){
            // if we have detected that the tour has already been taken,short circuit
            console.log('tour detected as having started prevIoUsly');
            return;
        }else{
            console.log('tour starting');
            tour.start();
        }
    }

    // updates localStorage with the current tour's name to have a true value
    function tourHasBeenSeen(key){
        tourLocalStorage[key] = true;
        localStorage.setItem('myTour',JSON.stringify(tourLocalStorage));
    }

    function tourAgain(){
        // if you want to tour multiple pages again,clear our localStorage 
        localStorage.removeItem('myTour');
        // and if this is the first part of the tour,just continue below otherwise,send the user to the first page instead of using the function below
        // if you just want to tour this page again just do the following line
        tour.start();
    }

    activate();
});

PS.我们没有使用onEnd触发tourHasBeenSeen函数的原因是,当前有一个引导浏览的bug,如果最后一步的元素不存在,则游程结束而不触发onEnd回调BUG.