Question

我有一个运行良好的脚本，该脚本检查来访者是否已分配了优待券代码，但想添加功能来检索分配给他们的优待券代码并显示它。两者都依赖于 localStorage 属性。我遇到的问题是，当我显示存储的值时，它返回[object HTMLSpanElement]而不是应该分配的值。

我在此问题上发现的所有内容几乎都与范围有关，但是我看不到范围问题……甚至尝试使变量在范围内成为全局变量，但这似乎没有任何作用。

这是JS：

if(localStorage.getItem("visited") != "true"){
    localStorage.setItem("visited","true"); 
    var codeValue = document.getElementById("code");
    localStorage.setItem("code",codeValue);
} 
else { 
    var savedCode = localStorage.getItem("code");
    document.getElementById("message").innerHTML = "You've already been assigned coupon code " + savedCode;
}

以下是相关的HTML：

<span id="message">Your coupon code is: <span id="code">CODE1234</span></span>

访问完页面后返回该页面时，我希望跨度文本显示You've already been assigned coupon code CODE1234，但返回的是You've already been assigned coupon code [object HTMLSpanElement]

请注意，脚本的一部分是我之前创建并投入生产的，而我基本上是在背负该功能。以前，如果getItem("visited") != "true"返回false，它会弹出一个警报框并说您已经获得了代码，然后将您重定向到另一个页面。

Answer 1

您正在将元素本身（它是一个对象）存储在 localStorage 中。您应该存储元素的文本。

更改

var codeValue = document.getElementById("code");

收件人

var codeValue = document.getElementById("code").textContent;

请注意：根据Window.localStorage

键和值始终是字符串（请注意，与对象一样，整数键将自动转换为字符串）。

Answer 2

您需要访问元素内的文本，这里您将html元素存储在localstorage中。更改代码以访问文本

document.getElementById('code').innerText

为什么我的localStorage.getItem变量返回“对象HTMLSpanElement”？

2 个答案: