Javascript 本地存储范围答案

【问题标题】：Javascript LocalStorage ScopeJavascript 本地存储范围
【发布时间】：2017-08-14 15:17:42
【问题描述】：

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

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

我的代码如下；

$("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>

【问题讨论】：

当然是未定义的。因为你没有定义它。您不能同时进入if (is_stopped) 和if (!is_stopped)。
因为它只在if (is_stopped)块中定义，在其他任何地方都没有任何价值，尤其是在if (!is_stopped)块中。
您的点击处理程序在哪里？您在点击时设置 is_stopped，但您没有请求任何进一步的操作。您需要一个处理程序来告诉浏览器在设置状态后您真正想要做什么。

标签： javascript html scope local-storage

【解决方案1】：

可能是因为is_stopped为假，所以没有进入第一个if，也没有取回值。请注意，在函数内部声明的变量会在函数结束时被垃圾回收。

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 事件侦听器移到其他侦听器之外会使它们工作得更好...

【讨论】：

【解决方案2】：

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

这可行：

var test = null; // declare outside conditional

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

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

【讨论】：

不，js有函数作用域
@Jonasw 是的......那么你的意思是什么？将此代码放在 onmessage 处理程序中，它将按照 cmets 中的描述运行。
它是在条件之外声明的

【解决方案3】：

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

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

由于托管var test 将被提升到函数的顶部并且它是未定义的。

只有当if (is_stopped) {..}被执行时，test才会被赋值

【讨论】：