Question

我第一次使用localstorage并遇到了一些范围问题。

当我尝试console.log(test)时，我会在第二个undefined语句中获得if。我做错了什么？

我的代码如下;

$("document").ready(function(){

    var is_stopped = false;

    source.onmessage = function(event) {

        if (is_stopped) {
            localStorage.setItem('offline', event.data);
            var test = localStorage.getItem('offline');
            console.log(test); // works here
        }       

        if (!is_stopped) {
            document.getElementById("result").innerHTML += "Data:" + event.data + "<br>";
            console.log(test); // undefined 
        }

        $("#start").click(function(){
            is_stopped = false;
        });

        $("#stop").click(function(){
            is_stopped = true;
        });

});

<div id="result"></div>
<button id="stop"> stop</button>
<button id="start"> start</button>

Answer 1

可能是因为 is_stopped 为false，因此它不会输入第一个if和doesnt检索值。请注意，函数内部声明的变量在函数结束时被垃圾收集。

var test;//stays persistent
source.onmessage = function(event) {

    if (is_stopped) {
        localStorage.setItem('offline', event.data);
        test = localStorage.getItem('offline');
        console.log(test); // works here
    }       

    if (!is_stopped) {
        document.getElementById("result").innerHTML += "Data:" + event.data + "<br>";
        console.log(test);
    }
};

提示：将click事件侦听器移到另一个侦听器之外会使它们工作得更好......

Answer 2

当test为false时，名为is_stopped的变量未定义，因为它未在is_stoppped条件之外声明。

这样可行：

var test = null; // declare outside conditional

if (is_stopped) {
    test = localStorage.getItem('test');
}       

if (!is_stopped) {
    console.log(test); // returns null
}

Answer 3

运行应用程序时，var is_stopped将设置为false。

在这种情况下，if (!is_stopped) {..}将被执行。if (is_stopped) {..}将不会被执行

由于托管var test将被提升到功能的顶部＆amp;它是未定义的。

只有在test执行

时才会为

if (is_stopped) {..}分配值

Javascript LocalStorage范围

3 个答案: