javascript - sessionStorage 无法立即可用

Question

在下面的示例中(在 jsfiddle 中，依赖于 requirejs)，控制台第一次输出 theUsername 和 http://nothing&username=null ，然后如果您再次运行它，它会按照您的预期输出(即 http://nothing&username=theUsername)

define('environment', {
    myData: 'http://nothing&username=' + sessionStorage.getItem('username')
});

require(['environment'], function (environment) {
    sessionStorage['username'] = 'theUsername';

    console.log(sessionStorage.getItem('username'));
    console.log(environment.myData);
});

之前的编辑

我不知道如何在具有所有依赖项的 jsfiddle 中进行设置，但这里有一个简单的版本，演示了 azure 中的问题。该页面实际上没有执行任何操作，并且遇到了死连接字符串，因此您必须通过浏览器开发工具或 firebug 查看它。

http://tomdev.azurewebsites.net/www/index.html

好吧，希望是最后一次更新...我能够在 jsfiddle 中显示问题，非常简单的小例子。在 Chrome 中观看控制台。运行一次，您就会看到问题，再次点击运行，您就会看到它现在正在工作。

http://jsfiddle.net/JhK5L/1/

Answer 1

您将在 define() 调用中使用 sessionStorage['username'] 中的任何值初始化 myData。因此，第一次调用 define() 时，该值为 null，并且在您在 require() 中初始化 sessionStorage['username'] 之前不会设置 函数。

不要将 myData 初始化为字符串，而是将其设为一个在调用时检索当前值的 getter 函数:

define('environment', {
    myData: function() { return 'http://nothing&username=' + sessionStorage.getItem('username'); }
});

require(['environment'], function(environment) {
    sessionStorage['username'] = 'theUsername';

    $("ul").append('<li>' + sessionStorage.getItem('username') +'</li>');
    $("ul").append('<li>' + environment.myData() +'</li>');
});