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

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：

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;
}

当您访问完页面后返回该页面时，我希望显示跨度文本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

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