在使用會話和本地存儲在Chrome中時Angular JS頁面無法加載

我是angular js的新手，並且遵循本教程http://embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg/來創建簡單的SPA頁面。其中，當我在About頁面中使用Local和Session存儲概念時，除了Chrome之外，它完全可以在Firefox，IE中使用。我無法在Chrome中找到問題。所以請你需要你的幫助。在使用會話和本地存儲在Chrome中時Angular JS頁面無法加載

的index.html

<html ng-app="scotchApp"> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script> 
     <script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <script src="./script.js" type="text/javascript"></script> 
    </head> 
    <body ng-controller="mainController"> 
    <header> 
      <nav class="navbar navbar-default"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <a class="navbar-brand" href="/">Angular Routing Example</a> 
       </div> 

       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li> 
        <li><a href="#about"><i class="fa fa-shield"></i> About</a></li> 
        <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li> 
       </ul> 
      </div> 
      </nav> 
     </header> 

     <!-- MAIN CONTENT AND INJECTED VIEWS --> 
     <div id="main"> 

      <div ng-view></div> 

     </div> 

    </body> 
    </html>

頁/ about.html：

<div class="jumbotron text-center"> 
     <h1>About Page</h1> 

     <p>{{ message }}</p> 

     <input type="button" value="Save" ng-click="Save()" /> 
     <input type="button" value="Get" ng-click="Get()" /> 

    </div>

頁/ contact.html：

<div class="jumbotron text-center"> 
    <h1>Contact Page</h1> 

    <p>{{ message }}</p> 
</div>

頁/ home.html的：

<div class="jumbotron text-center"> 
     <h1>Home Page</h1> 

     <p>{{ message }}</p> 
    </div>

個

scripts.js中：

var scotchApp = angular.module('scotchApp',['ngRoute','ngStorage']); 


    scotchApp.config(function($routeProvider) { 
     $routeProvider 

      // route for the home page 
      .when('/', { 
       templateUrl : 'pages/home.html', 
       controller : 'mainController' 
      }) 

      // route for the about page 
      .when('/about', { 
       templateUrl : 'pages/about.html', 
       controller : 'aboutController' 
      }) 

      // route for the contact page 
      .when('/contact', { 
       templateUrl : 'pages/contact.html', 
       controller : 'contactController' 
      }); 
    }); 

    // create the controller and inject Angular's $scope 
    scotchApp.controller('mainController', function($scope, $localStorage, $sessionStorage, $window) { 
     // create a message to display in our view 
     $scope.message = 'Everyone come and see how good I look!'; 
    }); 

    scotchApp.controller('aboutController', function($scope, $localStorage, $sessionStorage, $window) { 
     $scope.message = 'Look! I am an about page.'; 
     $scope.Save = function() { 
       $localStorage.LocalMessage = "LocalStorage: My name is Mudassar Khan."; 
       $sessionStorage.SessionMessage = "SessionStorage: My name is Mudassar Khan."; 
       $localStorage.$save(); 
       $sessionStorage.$save(); 
      } 
      $scope.Get = function() { 
       $window.alert($localStorage.LocalMessage + "\n" + $sessionStorage.SessionMessage); 
      } 
    }); 

    scotchApp.controller('contactController', function($scope, $localStorage, $sessionStorage, $window) { 
     $scope.message = 'Contact us! JK. This is just a demo.'; 
    });

在此先感謝。

來源

2016-03-01 EverGreen

是否有任何錯誤控制檯？ –

@Asim K T XMLHttpRequest無法加載file：/// C：/Users/sivakumarj/Desktop/Examples/Session/angular/pages/home.html。協議方案僅支持交叉源請求：http，data，chrome，chrome-extension，https，chrome-extension-resource。 – EverGreen

看起來你必須使用本地服務器來提供文件。 http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local。或者在終端中使用此標誌啓動chrome：--allow-file-access-from-files –

您需要通過本地服務器爲您的html提供服務。現在你的文件正在充當文件：///它應該是http：//

請參閱本stackoverflow answer

來源

2016-03-01 06:34:49

在使用會話和本地存儲在Chrome中時Angular JS頁面無法加載

回答

相關問題