Disable the button even after page refresh or logout from the application

Question

I have the below code and when i refresh the application the button is enabled state. I want the button to be in disabled state even after page refresh or logout from the application. Basically i need to save the state of the button. How can i do that?

//html
<div>
<input type="file" ng-disabled="false" id="id1">
</div>

//Controller
document.getElementById("id1").disabled = true;

Answer 1

You can use localStorage to save the state which is simple solution.

Store values for on page refresh and logout

localStorage.setItem('isPageRefreshed', 'true'); // page refresh

localStorage.setItem('isLoggedOut', 'true'); // on logout

Now you can add check for button disable, like this:

HTML:

<input type="file" ng-disabled="isDisabled" id="id1">

JavaScript/Controller:

if(localStorage.getItem('isPageRefreshed') === "true") {
  $scope.isDisabled = true;
}

if(localStorage.getItem('isLoggedOut') === "true") {
  $scope.isDisabled = true;
}

Anytime you want to enable the button then do this $scope.isDisabled = false;

Answer 2

The correct approach to use ng-disabled is to control it via controller.

<div>
<input type="file" ng-disabled="isUserLoggedIn" id="id1">
</div>

Controller

$scope.isUserLoggedIn = this.appService.isUserLoggedIn() || false;
//returns true or false based on if user is logged In

AppService

This can check localstorage as mentioned by VicJordan or whatever logic you wanted and implement.