Ionic，Phonegap，AngularJs：模拟时本地存储未定义键答案

【问题标题】：Ionic, Phonegap, AngularJs : local storage undefined key when emulatingIonic，Phonegap，AngularJs：模拟时本地存储未定义键
【发布时间】：2015-05-06 22:52:22
【问题描述】：

我刚刚构建了一个简单的应用程序，调用了一个使用 symfony 构建并使用 fos_oauth 保护的 rest api。

我有一个 AuthService，它返回一个访问令牌，允许我的移动应用程序访问我的 api。

它存储在本地存储中：

在我使用 ionic serve（类似于 phonegap serve）的浏览器上，应用程序运行良好，我可以访问本地存储的变量。用 ios 模拟时，它工作得很好。但是当使用 android 模拟或使用 phonegap 应用程序在我的手机上显示我的应用程序时。我无法访问这些变量。你觉得这很正常吗？

[phonegap] 404 http://ynd.dev/api/login?access_token=undefined

index.html：

<!-- Utils -->
<script src="js/service/LocalStorageService.js"></script>

<!-- JS Config -->
<script src="js/functions.js"></script>
<script src="js/config/parameters.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/config/routing.js"></script>
<script src="js/service/AuthService.js"></script>

LocalStorageService.js：

setObject: function(key, value) {
    $window.localStorage.setItem(key, JSON.stringify(value));
},
getObject: function(key) {
    return JSON.parse($window.localStorage.getItem(key) || '{}');
}

parameters.js：

// Resources
var domain = 'http://ynd.dev';
var public_id = '4_4spkzm1pubcw40og04okk4wogs0cc44wkgkkoco88k8cwgkwgs';
var secret = '28es09ymlcg0wgskgs4cso0co0ok0ww0gw8g0k8g4kcowckcco';

// Access token
var access_token = '';
var identity_token = '';

app.js：

var app = angular.module('ionicApp', ['ionic', 'ionic.utils', 'ngResource']);

app.run(function($ionicPlatform,$rootScope, $localStorage, $location, AuthService) {

  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

    access_token = $localStorage.getObject('access_token');
    identity_token = $localStorage.getObject('identity_token');

    AuthService.token();

  });
  $rootScope.$on('$stateChangeStart', function (event, next) {

    access_token = $localStorage.getObject('access_token');
    identity_token = $localStorage.getObject('identity_token');

    AuthService.token();

    // IF no user logged
    if(isObjectEmpty(identity_token)){

      $location.path( "/login" );

    }

  });
});

AuthService：

这就是对象在本地的存储方式。

$localStorage.setObject('access_token', {
                            key: res.data.access_token,
                            type: 'anonymous',
                            expires_at: Date.now()+(res.data.expires_in*1000)
                        });

有什么想法或提示吗？

更新：（CORS）

allow_origin: ['*'] 
allow_headers: ['*'] 
allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']

【问题讨论】：

您应该尝试在 setObject/getObject 上记录 localstorage，以提供更多信息。我没有看到明显的原因，但是您应该使用 localStorage.getItem(key) 和 .setItem(key) 而不是 localStorage[key]，最好 stackoverflow.com/questions/12632463/… 请注意，我看不出这如何解决您的问题，这只是一种优化。
好的，谢谢，很高兴知道这一点。
警报字段实际上来自哪里？您在代码中的哪个位置调用警报？
在我调用 url 'ynd.dev/api/login?access_token='+access_token

标签： angularjs cordova local-storage phonegap-build ionic

【解决方案1】：

在 Phonegap 中使用该应用程序时，该应用程序是从文件系统调用的，因此在 file:// 协议上运行。当你想要调用你的服务器时，你需要在你的服务器上使用 JSONP 或 CORS 头来建立成功的连接，否则会出现跨域安全策略。

【讨论】：

服务器端使用 Symfony2 和 FOS Rest bundle 和 Nelmio Cors Bundle。设置已经完成并且正在工作。我的应用程序实际上已经在我的服务器端之外，并且应用程序正在正确地从中获取数据。仅在 phonegap App 和 Android 模拟上，我无法访问本地存储的变量（或存储的变量没有从服务器获取数据）。这里更新了帖子中的 cors 设置。
这个问题是否也存在于真正的安卓设备或iOS模拟器中？
IOS 模拟器运行良好，返回正确的值。 Android 模拟器返回未定义。允许在 Iphone 或 Android 手机上通过 IP 测试它的 Phonegapp 应用程序（无需编译）也返回未定义。
我不熟悉Phonegap“通过IP而不编译”，但也许你的模拟器不支持localStorage并且通过IP的Phonegap存在某种域不匹配。您是否尝试编译该应用并让它在设备上运行？
模拟器只是模拟器，在某些情况下它们的行为不同。从我在您的代码中看到的内容来看，它对我来说是正确的，并且使用正确的 CORS 标头，它至少应该在大多数浏览器和设备中检索并将值存储到 localStorage。所以在你的情况下，我会首先尝试确保问题不在于模拟器:)

【解决方案2】：

它根本不起作用，因为模拟的应用程序不访问本地主机。

第一个解决方案：

从在线主机调用 api。

第二种解决方案：

而不是调用http://localhost/调用IP（你可以用ifconfig来获取它，我自己使用ifconfig vboxnet0）。

对于虚拟主机我还没有弄清楚。

【讨论】：