当我在调试器中看到数据时，为什么window.localStorage为空？

Question

我将一些数据存储在本地存储中，但在页面首次打开时检测它们时出现问题。

这是我的代码：

lib.getUserGeoLocation();
lib.getUserCityLocation();

var lib = {
    getUserGeoLocation: function(){
        navigator.geolocation.getCurrentPosition(onSuccess, onError);

        function onSuccess(position) {
            window.localStorage.setItem("latitude", position.coords.latitude);
            window.localStorage.setItem("longitude", position.coords.longitude);
        }

        function onError(error) {
            // (...)
        }

    },

    getUserCityLocation: function(){
        var lat = window.localStorage.getItem("latitude");
        var lng = window.localStorage.getItem("longitude");

    console.log(window.localStorage);
    }
}

结果是：Storage {length: 0}
但是当我查看调试器时，数据就在那里：

有谁知道为什么window.localStorage为零/ window.localStorage.getItem("latitude")返回null？

更新

在调用getUserCityLocation()之前，我也尝试过这个解决方案以确保我有值：

$.when(lib.getUserGeoLocation()).then(function(){
    lib.getUserCityLocation();
});

解决方案

所以我的解决方案是：

getUserGeoLocation: function(callback){
    navigator.geolocation.getCurrentPosition(onSuccess, onError);

    function onSuccess(position) {
        window.localStorage.setItem("latitude", position.coords.latitude);
        window.localStorage.setItem("longitude", position.coords.longitude);
        return callback(true);
    }

    function onError(error) {
        return callback(false, error);
    }
},

Answer 1

因为 getUserGeoLocation 需要一些时间来获取数据，然后在 localStorage 中插入值，同时您调用函数 getUserCityLocation ，所以这将使你返回null。

Answer 2

“onSuccess”和“onError”是异步调用，一旦值可用就会被调用，其中getUserGeoLocation和getUserCityLocation被一个接一个地调用。因此，在调用onSuccess回调之前已经调用了getUserCityLocation中的代码

当你使用when和then时，你应该从回调时返回或调用成功或错误。由于getUserGeoLocation没有这样做，你仍然是空的