3

I have a JavaScript slide show that executes when the main web page is visited. When the visitor clicks a link to visit another page (example: pricing) and returns to the main page, the javascript executes the slideshow again which can "get on your nerves" after awhile.

Is there a way to track a visitor during the session so that the main page's slideshow only executes that first time they visit the site?

Here is the code and the site is https://www.softechsystems.com

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="fadeslideshow.js"></script>

    <script type="text/javascript">
      var mygallery=new fadeSlideShow({
          wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
          dimensions: [741, 218], //width/height of gallery in pixels. Should reflect dimensions
          of largest image

      imagearray: [
          ["images_iob/admin_panel_3a.jpg", "", "admin panel", ""],
          ["images_iob/admin_panel_2a.jpg", "", "admin panel", ""],
          ["images_iob/admin_panel_1a.jpg", "", "admin panel", ""]],

      displaymode: {type:'auto', pause:1000, cycles:1, wraparound:false},
      persist: false, //remember last viewed slide and recall within same session?
      fadeduration: 500, //transition duration (milliseconds)
      descreveal: "ondemand",
      togglerid: "",
      oninit: function(){
             --this.setting.totalsteps;
       }
    })
</script>

Bear with me, I am a low information newbie .. thanky ... Scott Sagnette

Softech Systems
  • 31
  • 2

2 Answers2

1

There are several ways to approach this Scott, but the easiest way will be to leverage the browser's localStorage MDN.

sessionStorage is less than ideal here, as it can cause the effect to happen too frequently for user preference. For example, if the user opens a new tab, there will be a new session. If the user reopens the page, same deal.

So, if you want it to only happen upon first visit, or a relatively first visit (for example in the past week), you should use localStorage. Here is a good way to accomplish that:

(function(){
    var loadItem = localStorage.getItem('loaded');
    var daysToExpire = 7; // one week

    // If it was loaded in the past week, then this is 1 (true), if not 0 (false)
    var loaded = Date.now() - loadItem < 1000 * 60 * 60 * 24 * daysToExpire ? 1 : 0;

    if(!loaded) {
        var mygallery=new fadeSlideShow({ /*...*/ });
    }
})();
$(window).on("load", function () {
    $(function () {
        localStorage.setItem('loaded', Date.now());
    });
});
Travis J
  • 81,153
  • 41
  • 202
  • 273
  • Basically a cookie. – JavaScript Mar 18 '20 at 09:37
  • @JavaScript - Cookies are used to store information that is coordinated with a database, or which is consumed by a server for analysis. This *only* lives in the client. See [Local Storage vs Cookies](https://stackoverflow.com/questions/3220660/local-storage-vs-cookies) for some more information on the topic. – Travis J Mar 18 '20 at 17:35
  • Cookies have nothing to do with databases by defintion. – JavaScript Mar 19 '20 at 06:35
  • @JavaScript - Not sure what you are on about mate, but whatever you are having I would also like some. – Travis J Mar 19 '20 at 07:33
0

You can use sessionStorage to set a key with array of visited pages like below: 

// get value of key if exists, to check if page was visited
sessionStorage.getKey('visited');

// set the visited pages     
sessionStorage.setItem('visited', 'welcome_page,pricing_page');

Reference:
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Shiko
  • 2,448
  • 1
  • 24
  • 31