如何从 textarea 保存到 localStorage？答案

【问题标题】：How to save to localStorage from textarea?如何从 textarea 保存到 localStorage？
【发布时间】：2011-12-15 02:24:42
【问题描述】：

我正在尝试将输入到 localStorage 中的 textarea 的电子邮件保存。加载页面时，我看到占位符“您的 gmail 地址”，但是当我输入一个值并单击“保存”时，没有任何反应。我没有看到验证文本已保存的警报或控制台。我做错了什么？

<html>
<head><title>Extension Options</title></head>
<body>
<textarea id="user" style="margin-bottom: 4px; width: 250px; height: 20px">
</textarea><br />
<button id="save">Save</button>
<!--<button id="save">Clear</button>-->

<script type="text/javascript">

//check if "user" is in localStorage

if (localStorage["user"])
{
    var user = localStorage["user"] ;
    document.getElementById("user").value = user ;
    alert("you are already a user")
}
else
{
    document.getElementById("user").placeholder = "your gmail address" ;
    console.log("user no found in localStorage")
}

//save entered gmail address
document.getElementById("save").addEventListener
{
    "click", function ()
    {
        var user = document.getElementById("user").value ;
        //localStorage["user"] = user ;
        localStorage.setItem("user", user) ;
        alert("gmail id saved") ;
        console.log("gmail id saved")
    } , false
}

</script>
</body>
</html>

【问题讨论】：

您肯定会在控制台中看到语法错误。
@pimvdb，是的，你说得对，我用花括号再次尝试，我在控制台中看到了错误消息。

标签： javascript html google-chrome-extension local-storage

【解决方案1】：

您的 addEventListener 函数使用不正确。应该这样使用：

document.getElementById("save").addEventListener("click", function ()
    {
        var user = document.getElementById("user").value ;
        //localStorage["user"] = user ;
        localStorage.setItem("user", user) ;
        alert("gmail id saved") ;
        console.log("gmail id saved")
    } , false);

MDN docs on element.addEventListener

Working demo with your code

【讨论】：