javascript - 如何检测用户第一次登录和第一次加载特定页面？

Question

我想只在用户第一次登录时触发一些 JS，并且只在第一次加载特定页面时触发。

我相信我可以处理他们第一次登录的问题，只需检查 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 次。这就是我要阻止的。

我希望这能提供更多的清晰度。

Answer 1

前言

据我了解，您有:

1. 包含单个导览的多个页面(每个页面的导览不同)
2. 一种检测帐户首次登录的方法(ruby 登录计数)
3. 能够根据首次登录添加脚本值

解决方案概述

下面的解决方案使用 localStorage 来存储每个游览标识符的键值对以及是否已看到。 localStorage 在页面刷新和 session 之间持续存在，顾名思义，localStorage 对于每个域、设备和浏览器都是唯一的(即 chrome 的 localStorage即使是同一个域也无法访问 firefox 的 localStorage，笔记本电脑上的 chrome 的 localStorage 也不能访问手机上的 chrome 的 localStorage 即使是同一个域) .我提出这个问题是为了说明依赖前言 3 来切换 JS 标志以判断用户之前是否登录过。

为了开始游览，代码会检查 localStorage 是否其对应的键值对未设置为 true(表示已被“看到”)。如果它确实存在并且设置为 true，则游览不会开始，否则它会运行。每次游览开始时，使用其 onStart 方法，我们将游览的标识符更新/添加到 localStorage 并将其值设置为 true。

如果您只想执行当前页面的游览，可以通过手动调用游览的 start 方法来手动执行游览，否则，您可以清除所有 与游览相关的 localStorage 并将用户发送回第一页/如果您在第一页，再次调用 start 方法。

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

HTML(这可以是具有 id="tourAgain" 属性的任何元素，以便以下代码正常工作。

<button class="btn btn-sm btn-default" id="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,
            backdrop: true,
            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",
                title: "Go Home",
                content: "Go home to the main page."
            }, {
                element: "div.navbar-header 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)"
            }, {
                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();
});

附言。我们不使用 onEnd 来触发 tourHasBeenSeen 函数的原因是目前 Bootstrap 游览存在一个错误，如果最后一步的元素不存在，则游览结束而不会触发onEnd 回调，BUG .