How to run this script only once

Question

Below is my JavaScript function, it needs to run only once. It means that when the user visits the website for the first time the code must be run. When the page reloads it doesn't need to run. I am running this code in WordPress using a custom HTML plugin.

<script>
    introJs().setOptions({
      steps: [{
        intro: "Welcome to our website!"
      }, {
        title: 'Introducing New Dark Mode',
        element: document.querySelector('.menu-main-container'),
        intro: "Now you can browse in dark mode or dark theme!"
      }]
    }).start();
</script>

use localStorage, or a cookie to notify your code that the code has run before — Bravo, Aug 17 '21 at 13:12
@Bravo Could you please show me the way to do that. I'm new to javaScript — , Aug 17 '21 at 13:15
I've given you two things to research - that's how SO works, you research first, try second, ask third — Bravo, Aug 17 '21 at 13:16

score 1 · Accepted Answer · edited Aug 17 '21 at 13:45

1

You can store a key like didRunIntro in localStorage initialized as false and run the script if didRunIntro is false.

if (!localStorage.getItem('didRunIntro')) {
  //Getting in here only when didRunIntro = false
  introJs()
    .setOptions({
      steps: [{
          intro: 'Welcome to our website!',
        },
        {
          title: 'Introducing New Dark Mode',
          element: document.querySelector('.menu-main-container'),
          intro: 'Now you can browse in dark mode or dark theme!',
        },
      ],
    })
    .start();

  //Change the value to true to avoid more runs
  localStorage.setItem('didRunIntro', true);
}

edited Aug 17 '21 at 13:45

Ivar

6,138
12
49
61

answered Aug 17 '21 at 13:29

lightPT

58
5

1

It's worth noting that localStorage sets and gets _strings_, and no other types such as booleans. (This will work because when the item doesn't exist, it will return `null`, which is a falsy value and `true` will be converted to `"true"`, which is a truthy value. Though it might be a bit misleading.) – Ivar Aug 17 '21 at 13:48

smotastic · Answer 2 · 2021-08-17T13:42:00.050

0

As ivar noted, cookies are send with every request, so I would recommend to use the localStorage approach, given by Or Partush Will leave the answer for the sake of completion.

You could use cookies to make sure your code is only executed once.

function isCookieSet () {
    const cookieValue = document.cookie
        .split('; ')
        .find(row => row.startsWith('cookie1'))
        .split('=')[1];
    return cookieValue;
}

function init() {
    if(!isCookieSet()) {
        // execute your code
        // set cookie
        document.cookie = 'cookie1=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/'
    }
}

Something like this, see also https://developer.mozilla.org/en-US/docs/Web/API/document/cookie#example_2_get_a_sample_cookie_named_test2

You could also write a helper function to easily set and get cookies as shown here: Set cookie and get cookie with JavaScript

edited Aug 17 '21 at 13:42

answered Aug 17 '21 at 13:19

smotastic

388
1
11

I would highly recommend to use `localStorage` instead of cookies. Cookies are send with every request to the server, which is completely unnecessary. – Ivar Aug 17 '21 at 13:26
1

Thank you, that is true. I edited my answer to recommend Or Partush's approach, but will leave it for the sake of completion. – smotastic Aug 17 '21 at 13:42
@smotastic Thanks for the advice and showing another way besides localStorage – Aug 17 '21 at 14:00

How to run this script only once

2 Answers2