State persist after reload

Question

I have a star icon that i want it to turn yellow every-time a user press it but i don't know how to persist this color to it's related object after reload..

This my javascript

$scope.favorite = function (idea) {
        $scope.newFav.ideaId = idea.id;
        $(document).on('click', '.box-btn', function() {
            $(this).find('.uiIconStar').toggleClass('reeed').toggleClass('uiIconStarBlank uiIconColorStarYellow');
        });
    };
    $scope.saveFavorite = function(idea) {
        $scope.newFav.ideaId = idea.id;
        $http({
            data : $scope.newFav,
            method : 'POST',
            headers : {
                'Content-Type' : 'application/json'
            },
            url : ideaFrontContainer.jzURL('IdeaFrontController.SaveFavorite')
        }).then(function successCallback(data) {
            $scope.loadFavorites();
        }, function errorCallback(data) {
            //  $scope.setResultMessage($scope.i18n.defaultError, "error");
        });


    };

Answer 1

You can use localStorage to store a flag in the browser.

The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.

Then, on page load, simply check whether the flag is set and adjust the color accordingly.