在 Jquery done 方法中使用 localstorage

Question

当用户的回答正确时，我想在 .done 方法中设置一个本地存储。然后我想get 那个本地存储对象并在done 方法之外使用它。这怎么可能？以下是我正在尝试但没有成功的方法。

data.color 是一个字符串

$.ajax({
    type: "POST",
    url: "validation.php",
    dataType: "json",
    data: $("input").serialize(),
}).done(function(data) {
 if (data.answer) { //if answer is correct
 localStorage.setItem("ColorStorage", data.color); //set a local storage with the variable data.color
    }
});

//outside of ajax
if (localStorage.getItem("ColorStorage") > 1)
    $("#result").append(localStorage.getItem("ColorStorage"));

Answer 1

localStorage.getItem("ColorStorage") 的返回值是String，因此将其与例如像> 1 这样的数字不起作用。

你可以例如省略> 1，如果项目存在，它将返回true。

if (localStorage.getItem("ColorStorage"))  {

}

你当然也可以检查它的length，虽然在你确定它存在之后，否则你会得到一个错误，如果它不存在。

if (localStorage.getItem("ColorStorage") && localStorage.getItem("ColorStorage").length > 1)  {

}

---

另外请注意，如果您在 AJAX 调用为 done 之前进行该调用，则该项目将不存在，但使用上述代码示例不会导致运行时错误。

Answer 2

您可以链接.done 并等待设置该项目：

$.ajax({
    type: "POST",
    url: "validation.php",
    dataType: "json",
    data: $("input").serialize(),
}).done(function(data) {
 if (data.answer) { //if answer is correct
 localStorage.setItem("ColorStorage", data.color); //set a local storage with the variable data.color
    }
}).done(
if (localStorage.getItem("ColorStorage") > 1)
    $("#result").append(localStorage.getItem("ColorStorage"));
);

您需要链接.done 函数以确保您的项目已设置。如果您将其留在ajax 回调之外，您不确定ajax 调用是否已返回并成功设置您的localStorage 项。您将不得不等待它，然后触发您的 getItem 函数。