Run function once after redirecting

Question

I'm trying to redirect user who access a site to a mobile site. This is what I have done so far but the problem is that the function keeps running every time when the page loads. The functions gets called after the page loads. I'm a JavaScript beginner.

function redirectPage() {
    var runOnce = 0;

    if (runOnce == 0 && windowWidth <= 767){
        runOnce = 1;
        window.location.assign("example.net/mobile-site");
    }

    else if (runOnce == 0 && windowWidth >= 767){
        runOnce = 1;
        window.location.assign("example.net/regular-site");
    }
}

UPDATE

This is what I did but so far the browser keeps loading again and again.

var windowWidth = 0;

$(document).ready(function(){
    checkBrowserWidth();
    redirectPage(); 
});

function checkBrowserWidth() {      
    windowWidth = window.outerWidth;
}

function redirectPage() {
    if (typeof(Storage) != 'undefined') {
        // Store value 
        localStorage.setItem('runOnce', 0);
    }
    var runOnce = localStorage.getItem('runOnce');

    if (runOnce == 0 && windowWidth <= 767){
        localStorage.setItem('runOnce', 1);
        window.location.assign("example.net/mobile-site");
    }

    else if (runOnce == 0 && windowWidth >= 767){
        localStorage.setItem('runOnce', 1);
        window.location.assign("example.net/regular-site");
    }
}

Answer 1

There are several issues with your approach.

Scope

JavaScript has function scope . This means that runOnce will always be undefined outside of the redirectPage function. So every call will leave runOnce as undefined .

 console.log(window.setSomething); // undefined function scopeExample() { var setSomething = 'something'; } console.log(window.setSomething); // undefined 

If you want to save off a global variable you will need to set it on a global scope like window .

// this will be set on a global-basis, however it will not affect the next request as 
// explained in the next section
window.runOnce = 0;
function redirectPage() {    
    if (window.runOnce == 0 && windowWidth <= 767){
        window.runOnce = 1;
        window.location.assign("example.net/mobile-site");
    }

    else if (runOnce == 0 && windowWidth >= 767){
        window.runOnce = 1;
        window.location.assign("example.net/regular-site");
    }
}

Script Lifetime

Imagine every page load as a separate app entirely. It has no knowledge of the previous request unless you want it to. You would need to save it in a cookie or in a client-side storage like localStorage .

function redirectPage() {
    var runOnce = localStorage.get('runOnce');

    if (runOnce == '0' && windowWidth <= 767){
        localStorage.set('runOnce', '1');
        window.location.assign("example.net/mobile-site");
    }

    else if (runOnce == '0' && windowWidth >= 767){
        localStorage.get('runOnce', '1');
        window.location.assign("example.net/regular-site");
    }
}