Question

A button on my web page upon clicking performs the following action i.e. Injects the script into the page

function InjectToolbar() {
    var script = document.createElement('script');
    scriptFarfalla.src = 'some_Path'
    document.getElementsByTagName('head')[0].appendChild(script);

}

.
.
.
.
.
.

It successfully performs the action desired. But when I reload the page the script is lost

Is there any method/technique with which I can buffer the button’s click
Like a toggle button

Toggle…..> script injected

Toggle…..> script detached

Answer 1

Everything that happens in javascript is reset when you leave a page (and return to it). So you need a way to store whether something is loaded or not. This depends on how long you want this to be “saved”/”remembered”. There are a few options for you to save this information – Cookies, HTML5 localStorage, HTML5 sessionStorage, and any server session usage you have available (if applicable). So if you want to implement something like this, you now need code onload of your page that checks the specific storage to see if you have set it. If so, inject the script. Here’s what I mean:

window.onload = function () {
    if (checkIfInjected()) {
        scriptInjection(true);
    }
}

function toggleInjection() {
    if (checkIfInjected()) {
        scriptInjection(false);
    } else {
        scriptInjection(true);
    }
}

function scriptInjection(inject) {
    if (inject == true) {
        var script = document.createElement('script');
        script.src = 'some_Path';
        script.id = 'injected_script_id';
        document.getElementsByTagName('head')[0].appendChild(script);

        // Set the storage to say that script is injected
    } else {
        var the_script = document.getElementById("injected_script_id");
        the_script.parentNode.removeChild(the_script);
        the_script = null;

        // Set the storage to say that script has been removed (or remove from storage altogether)
    }
}

function checkIfInjected() {
    // The following syntax is wrong for anything - you need to use the correct getter for the storage type you use
    return storage.contains("script_injected");
}

<input type="button" id="button1" onclick="toggleInjection();" />

Now it is up to you to determine what storage type you want because they all do different things, including how things are stored, what they are stored for, and how long they are stored for.