刷新后不显示本地存储答案

【问题标题】：Local storage not shown after refresh刷新后不显示本地存储
【发布时间】：2017-06-27 07:42:45
【问题描述】：

无论我做什么，我都无法让它工作。坐了几个小时，一无所获。提交表单后，我创建了值名称、姓氏、电子邮件的本地存储，这样我就可以使用它们来填写表单，这样用户就不必每次都输入它们。 submit() 在 review.controller.js 中

(函数(){ '使用严格';

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中（因为form和review在同一个页面，main是review的listing，review是提交的form）

提交表单后，所有这些值都显示在按钮中，但刷新页面后，它们都不再显示。我有点明白这完全是因为我对本地存储所做的一切都在 submit() 函数内，但我不知道如何修复它

【问题讨论】：

刷新后如何填充 $rootScope 值？
在另一个控制器中我有这行：` $rootScope.obtained_array = localStorage.getItem("LS_wimmtkey");` 但这似乎没有帮助
你能不能也发布其他控制器代码
请检查数据是否存入localstorage
是的，它已存储

标签： javascript angularjs

【解决方案1】：

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

【讨论】：

$scope.init = function () { $rootScope.obtained_array = localStorage.getItem("LS_wimmtkey");debugger; }; 我写了这个，在我看来我称之为`
` 和提交后它有值，但在 init() 中刷新 obtained_array 后为空

【解决方案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;

【讨论】：