I need a cookie or localstorage solution

Question

I'd like this window.onload to only trigger the modal once a month but I am having trouble making it work - please help

<script type="text/javascript">
    window.onload = function () {
        OpenBootstrapPopup();
    };
    function OpenBootstrapPopup() {
    $("#simpleModal").modal('show');

    }
    function myFunctionClose() {
        $("#simpleModal").modal('hide');
    }        
</script>

Welcome to Stack Overflow! What have you tried so far? It is expected that you show some effort, Please see the [ask](https://stackoverflow.com/help/how-to-ask) help page and [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) — dippas, Jul 24 '22 at 23:53
We don't allow "please help" questions on this forum. You need to provide minimum effort which you have not. It's clear you just want someone to make the solution for you — Kwright02, Jul 24 '22 at 23:53
This question can tell you how to create and read a cookie https://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie-with-javascript — Braeden Lisowski, Jul 24 '22 at 23:54
Store a timestamp in `localStorage` when you display the modal. Read it on page load and if it's unset or older than a month, show the modal and store a new timestamp — Phil, Jul 24 '22 at 23:55

score 1 · Accepted Answer · answered Jul 25 '22 at 01:10

Its actually quite simple. You can save in local storage the last time the popup showed up. But be aware of some details: local storage only saves text, so to save a date you can save the timestamp.

It would look something like this:

<script type="text/javascript">
    window.onload = function () {
        OpenBootstrapPopupIfOneMonthHasPassed();
    };
    
    function OpenBootstrapPopupIfOneMonthHasPassed() {   
        let lastTimeModalWasOpened = localStorage.getItem("lastTimeModalOpened");
        // if has never opened, then open it 
        if (!lastTimeModalWasOpened) {
            return openModal();
        }
        // we need to convert it back to date object
        let dateObjectlastTimeModalWasOpened = new Date(parseInt(lastTimeModalWasOpened));
        // we substract the dates and get their difference in miliseconds. If you want to check if the month has changed instead of a fixed amount of days, you could compare the Date.month property or something else
        let timePassedSinceModalWasOpened = new Date() - dateObjectlastTimeModalWasOpened;
        // the difference is given in miliseconds, thus we need to divide in milisecons, seconds, minutes, hours, days
        if (timePassedSinceModalWasOpened / (1000 * 60 * 60 * 24 * 30) > 30) {
            return openModal();
        }
    }

    function openModal() {
        $("#simpleModal").modal('show');
        localStorage.setItem("lastTimeModalOpened", Date.now());
    }

</script>

I ran into a minor problem where the OpenBootstrapPopup(); wouldn't trigger after the page was refreshed (before the user closed the modal triggering the countdown.) My solution was to add the line below. There probably is a better way to go about it. Anyway, thanks again. // if has never opened, then open it if (!lastTimeModalWasOpened) { return openModal(); // I added this: if has opened, then open it again if (lastTimeModalWasOpened) { return openModal(); } — maadco42, Jul 25 '22 at 04:13
Functioned last night (actually not sure how), did't this morning. Streamlined my cr@ppy code and moved localStorage.setItem("lastTimeModalOpened", Date.now()); to the myFunctionClose() function - Seems to work now. — maadco42, Jul 25 '22 at 22:36

I need a cookie or localstorage solution

1 Answers1