刷新后未顯示本地存儲

Question

無論我做什么，我都無法正常工作。 坐了幾個小時，一無所有。 提交表單后，我將創建值名稱，姓氏，電子郵件的本地存儲，以便我可以使用它們來填寫表單，這樣用戶就不必每次都鍵入它們。 Submit submit()在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檔案：

<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>

目前，我將這些值添加到按鈕以測試是否添加了值：

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

我的main.view插入了review.view（因為表單和評論位於同一頁面上，主要是用於評論列表，並且評論是提交的表單）

提交表單后，所有這些值都會顯示在按鈕中，但是刷新頁面后，這些值將不再顯示。 我有點理解，這都是因為我對本地存儲所做的所有操作都在submit()函數內部，但是我不確定如何解決它

Answer 1

您可以在第二個控制器上編寫一個init函數並在變量中設置本地存儲值。因此，每當刷新頁面時，都會調用init函數，並且本地存儲值可供您在View中使用

Answer 2

參見以下行：

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

“ obtained_array”屬於$ rootScope，因此$ rootScope無法綁定到模板（不可能綁定到$ rootScope）

快速解決方案是：在以下情況下更改以下行： MainController

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

如果是： ReviewController （您在此ctrl中設置“ LS_wimmtkey”）

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