为什么我的 localStorage.getItem 变量返回“object HTMLSpanElement”？答案

【问题标题】：Why is my localStorage.getItem variable returning "object HTMLSpanElement"?为什么我的 localStorage.getItem 变量返回“object HTMLSpanElement”？
【发布时间】：2019-04-10 22:11:36
【问题描述】：

我有一个运行良好的脚本，用于检查是否已为访问者分配了优惠券代码，但我想添加一些功能来检索分配给他们的优惠券代码并显示它。两者都依赖于 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，它会弹出一个警告框并说您已经获得了一个代码，然后将您重定向到另一个页面。

【问题讨论】：

var codeValue = document.getElementById("code"); - 这不是一个值，它是一个元素。
document.getElementById("code") 返回一个HTMLSpanElement。如果您想要文本，请获取textContent。如果您想要它的 HTML，请使用 innerHTML。
可能是javascript getElementById and convert it to String的骗子

标签： javascript html local-storage

【解决方案1】：

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

改变

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

到

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

请注意：根据Window.localStorage

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

【讨论】：

您不能在 localStorage 中存储 HTMLElement。它将toString() 的结果存储在localStorage 中。
@HereticMonkey，你是对的，更新了答案，谢谢:)
是的，这就是问题所在。谢谢！

【解决方案2】：

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

document.getElementById('code').innerText

【讨论】：