刷新后未显示本地存储

Question

I just can't get it working no matter what I do. Been sitting for hours and nothing. After submitting form I create local storage of values name, surname, email, so that I would be able to use them to fill up form so that user would not have to type them everytime. submit() is in review.controller.js

(function () { 'use strict';

angular.module('app').controller('ReviewController', ReviewController);

ReviewController.$inject = ['$location', 'AuthenticationService', 'FlashService', 'UniversalService', '$scope', '$sce', '$rootScope','$route','$cookies','localStorageService'];
function ReviewController($location, AuthenticationService, FlashService, UniversalService, $scope, $sce, $rootScope,$route,$cookies,localStorageService) {
   var vm = this;
    vm.name = null;
    vm.surname = null;
    vm.Email = null;
    vm.review = null;
    vm.allgenres = [];
    vm.submit = submit;
    vm.allreviews = [];
    $scope.localArray=[];
    loadAllReviews();
    submit();

    $scope.templates = [{ name: 'man.main.view.html', url: 'main/main.view.html'}];
    $scope.template = $scope.templates[0];

    function loadAllReviews() {      
        UniversalService.GetAllReviews()
            .then(function (review) {
                vm.allreviews = review;                    
            });
    }

    $scope.init = function () {debugger;
       // $scope.$MainController.obtained_array = localStorage.getItem("storageKey");debugger;
        $scope.storageKey = localStorage.getItem("storageKey");debugger;
    };

    $scope.storageKey = localStorage.getItem('storageKey');

  /*  $scope.$watch("storageKey", function() {debugger;
        localStorage.setItem('storageKey', storageKey); 
    });*/


    function submit() {  
    if($rootScope.name!=null)    {
        var JSONObject = {
             "name":$rootScope.name,
             "surname":$rootScope.surname,
             "email":$rootScope.email,
             "review":$rootScope.review
            }
        var temp={
            "name":$rootScope.name,
             "surname":$rootScope.surname,
             "email":$rootScope.email
        }
        $scope.localArray.push(temp);

        localStorageService.set("storageKey", $scope.localArray);

        $scope.storageKey = localStorageService.get("storageKey"); 
       // $rootScope.obtained_array = localStorageService.get("storageKey"); debugger;

        console.log($scope.storageKey);debugger;

        var Results = UniversalService.PostReview(JSON.stringify(JSONObject));
        }
    }
}

main.controller.js

'use strict';

var app= angular.module('app').controller('MainController', MainController);

MainController.$inject = ['$location', 'AuthenticationService', 'FlashService', 'UniversalService', '$scope', '$sce', '$rootScope','$log','PagerService','localStorageService','$mdDialog'];
function MainController($location, AuthenticationService, FlashService, UniversalService, $scope, $sce, $rootScope,$log,PagerService,localStorageService,$mdDialog) {
   var vm = this;
    vm.allreviews = [];
    vm.allusers=[];
    vm.allemails=[];
    vm.all=[];
    vm.avatars=[];
    $scope.filteredAll = [];
    $scope.all=[];
    $scope.items=[];

    $scope.pager = {};
    $scope.setPage = setPage;

    loadAllReviews();
    loadAllEmails();
    loadAllUsers();
    loadAll();
    loadAvatars();
    initController();
    setPage();
    submit();

    $scope.init = function () {
        $scope.$parent.storageKey = localStorage.getItem("storageKey");debugger;
       // $scope.obtained_array = localStorage.getItem("storageKey");
       // console.log(obtained_array); debugger;
       // $scope.storageKey = localStorage.getItem("storageKey");debugger;
    };


    function refresh() {
        location.reload();debugger;
    }


    function loadAll() {
        UniversalService.GetAll()
            .then(function (a) {
                $scope.all=a;
            });
    }

     function loadAllUsers(callback) {      
        UniversalService.GetAll()
            .then(function (response) {
                $scope.users=response;
                if (callback) {
                    callback(response);
                }
            });
    }

    function loadAllReviews() {      
        UniversalService.GetAllReviews()
            .then(function (review) {
                vm.allreviews = review;
            });
    }

    function loadAllEmails() {      
        UniversalService.GetAllEmails()
            .then(function (email) {
                vm.allemails = email;
            });
    }

    function setPage(page) {
        loadAllUsers(function (response) {
            if (response) {
                if (page < 1 || page > $scope.pager.totalPages) {
                    return;
            }
            // get pager object from service
            $scope.everything=response;
            $scope.pager = PagerService.GetPager(response.length, page);
            // get current page of items
            $scope.items = response.slice($scope.pager.startIndex, $scope.pager.endIndex + 1); 
            } 
        });
    }



    function initController() {
        $scope.setPage(1);  // initialize to page 1
    }

}

HTML file:

<div class="container padding-tb" id="Review">
<div ng-controller="ReviewController" ng-init="init()" ng-app id="Review">

<h2>Add review</h2>
    <form name="form" ng-submit="vm.submit()" role="form">
        <div >
            <div>
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" name="text" ng-model="name" onchange="CallItems()" id="name" class="form-control" ng-model="vm.name" placeholder="Enter name here"  required />
                    <span ng-show="form.name.$dirty && form.name.$error.required" class="help-block">Name is required</span>
                </div>
            </div>

            <div>
                <div class="form-group">
                    <label for="surname">Surname</label>
                    <input type="text" ng-model="surname" name="text" id="surname" class="form-control" ng-model="vm.surname" placeholder="Enter surname here"  required/>
                    <span ng-show="form.surname.$dirty && form.surname.$error.required" class="help-block">Surname is required</span>
                </div>
            </div>

             <div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" name="email" id="email" class="form-control" ng-model="vm.email" placeholder="Enter email here" required />
                    <span ng-show="form.email.$dirty && form.email.$error.required" class="help-block">Email is required</span>
                </div>
            </div>

            <div>
                <div class="form-group">
                    <label for="review">Review</label>
                    <input type="text" name="text" id="review" class="form-control" ng-model="vm.review" placeholder="Enter review here"  required/>
                    <span ng-show="form.review.$dirty && form.review.$error.required" class="help-block">Review is required</span>
                </div>
            </div>

           <div class="form-actions">
                <button id="submit" type="submit" onclick="passInfo()" class="btn btn-primary">Submit</button>

                <label style="display:none" id="label"><font color="white">Review succesfully created!  

                <a onclick="refresh()" href="../ang/#!/review">Add new review</a></label> or 
                <a href="../ang/#!/">View reviews!</a>


            </div>
        </div>

    </form>

    <div>

        <div ng-init="init()" class="slide-animate-container">
        <div class="slide-animate" ng-include="main.view.html"></div>
        </div>
    </div>
</div>

Currently I add these values to button to test if values are added:

<button ng-disabled="localStorage.getItem('LS_wimmtkey') !== null"> {{obtained_array}}</button>

My main.view is inserted into the review.view (because form and reviews are on the same page, main is for the review listing and reviews are submitted form)

After submiting form all these values appear in the button, but after refreshing page none of them are shown anymore. I kind of understand that it is all because everything I do with local storage is inside submit() function, but I am not sure how to fix it

Answer 1

您可以在第二个控制器上编写一个init函数并在变量中设置本地存储值。因此，每当刷新页面时，都会调用init函数，并且本地存储值可供您在View中使用

Answer 2

see below line:

<button ng-disabled="localStorage.getItem('LS_wimmtkey') !== null"> {{obtained_array}}</button>

"obtained_array" belong to $rootScope, so $rootScope can't bind to the template(binding to $rootScope is not possible )

quick solution is: change the following line in case of: MainController

$scope.obtained_array = localStorage.getItem("LS_wimmtkey");debugger;

in case of : ReviewController (you are setting in this ctrl "LS_wimmtkey")

$scope.$parent.obtained_array = localStorage.getItem("LS_wimmtkey");debugger;