0

I'm having some issues regarding a function. I'm creating an application that when the phone is on low battery it automatically switches to darkmode. The issue is that when I switch html pages the 'deviceready' function keeps firing, so I keep getting a low battery alert on every page I load. Is it because I have the event listener as a global? If so.. where should I place it so it only runs once? Thanks much appreciated.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {

    window.addEventListener("batterystatus", onBatteryStatus, false);
}

function onBatteryStatus(status) {
    console.log("Level: " + status.level + " isPlugged: " + status.isPlugged);

    if(status.level < 15){
        alert("Low Battery");
    }
}
Janssen Schembri
  • 35
  • 1
  • 6
  • Does this answer your question? [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) – Andy Ray Jun 01 '21 at 19:23
  • 1
    Use `localStorage` to remember if the alert has been shown already. – Ananth Jun 01 '21 at 19:25
  • That sounds like a good idea. Do you mind explaining a little further please? How would I tell the local storage that the alert has been shown already. Thanks – Janssen Schembri Jun 01 '21 at 19:27
  • Consider adding it inside last if statement and wrap alert inside another if statement – bmnidhin Jun 01 '21 at 19:32

2 Answers2

1

Yes... deviceready will be launched every time you open a new URL. In JS every time you open new URL all JS code is loaded to the browser and then run from the initial state. If you wish to keep record of something between pages you can use the browser cookies and/or local storage.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    window.addEventListener("batterystatus", onBatteryStatus, false);
}

function onBatteryStatus(status) {
    console.log("Level: " + status.level + " isPlugged: " + status.isPlugged);

    if(status.level < 15){
        if (!window.localStorage.getItem('alerted')) alert("Low Battery");
        window.localStorage.setItem('alerted', true);
    }
    else {
        window.localStorage.removeItem('alerted');
    }
}

onBatteryStatus({level: 1, isPlugged: false})
Rômulo Bourget Novas
  • 471
  • 2
  • 7
  • Thanks for your assistance and your clear guidance. I can understand it much clearer now. – Janssen Schembri Jun 01 '21 at 19:52
  • I have noticed that when I use Ionic alert instead of normal vanilla JS alert it doesn't work as intended. Would you by any chance have a clue? Thanks – Janssen Schembri Jun 01 '21 at 22:02
  • Hmmm... if I remember correctly to call ionic alert you have to use arguments... and so far as I used ionic v1 this was a async function. So calling the alert would not prevent the rest of your code from running until user input is done... Can you say which behaviour is off to you? – Rômulo Bourget Novas Jun 02 '21 at 22:58
  • I managed to fix it. Thanks for trying though. – Janssen Schembri Jun 03 '21 at 18:28
1

You can use the LocalStorage setItem function to save an object that contains a property indicating that the alert has been shown:

Say, For Instance {alertShown: true} You can call the LocalStorage getItem function in your event listener before displaying the alert. If the function returns null (meaning no object with KEY alertShown), then you can display the alert. Else if there is an object with that KEY, (meaning alert already shown) Do nothing or something else.

NOTE: Be sure to remove the data from storage at a certain point, for instance if the user's battery is no longer low. So the function runs correctly when the device goes low again.

Here's a helpful link on how to use LocalStorage

Richie nature
  • 66
  • 4