XMLHttpRequest 替换元素不适用于 LocalStorage答案

【问题标题】：XMLHttpRequest Replace Element Won't Work With LocalStorageXMLHttpRequest 替换元素不适用于 LocalStorage
【发布时间】：2020-01-16 06:49:02
【问题描述】：

我尝试在 javascript 代码中使用 localStorage 实现 cookie 日志记录，以替换特定元素。它使用 XMLHttprequest 方法，我不知道为什么它不能与 localStorage 一起使用。请赐教。

localStorage.setItem("replace1", this.JSON.parse(responseText));

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       document.getElementById("replace1").innerHTML = localStorage.getItem("replace1"); 
    }
  };
  xhttp.open("GET", "yoinkexecutor2.php", true);
  xhttp.send();
}

【问题讨论】：

repsonseText 是一个我相信的对象，因此使用 JSON.parse(responseText); 然后从该对象中检索属性
由于某种原因它仍然输出“未定义”
在哪一行代码中未定义？
我用更改的代码更新了帖子，元素只输出“未定义”，根本不显示元素。 i.imgur.com/Wn4JNCI.png现场natevanghacks.com/scriptexecutors2.php
我认为问题在于你应该把document.getElementById("replace1").innerHTML = localStorage.getItem("replace1");放在localStorage.setItem("replace1", this.JSON.parse(responseText)); 之后，因为异步行为，你试图在数据来自XHR请求之前显示一些东西

标签： javascript html ajax replace xmlhttprequest

【解决方案1】：

您只能在异步操作 (GET) 请求终止时显示数据。

否则你会得到 undefined，因为在该键下的 localStorage 中没有任何内容存在

此外，您只能将字符串存储在本地存储中，这意味着一旦您想使用 getItem 检索数据，就需要解析该对象字符串

 function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      localStorage.setItem("replace1", JSON.stringify(this.responseText))
      document.getElementById("replace1").innerHTML = JSON.parse(localStorage.getItem("replace1"))
    }
  };
  xhttp.open("GET", "yoinkexecutor2.php", true);
  xhttp.send();
}

【讨论】：

但是 JSON.stringify 似乎也不起作用，因为它在控制台中输出错误。未捕获的 ReferenceError：未在 XMLHttpRequest.xhttp.onreadystatechange 中定义 responseText。 i.imgur.com/rEafTqI.png
再查一下，应该是this.responseText
那太好了，哈哈。但是由于某种原因，当我刷新页面时，元素返回到其默认状态。只有当我单击它时，元素才会更改为 url 之一。奇数
@NateVang 这很奇怪 localStorage 应该保持状态。
是的，这很奇怪，我的意思是你搞定了一切。在这里，您可以看到natevanghacks.com/scriptexecutors2.php 当您单击 Yoink Executor 元素时，它会更改为 url 之一，但随后您刷新页面，它会恢复到默认状态。哈哈 man 代码有时会让人头疼。