无法将变量保存到本地存储中答案

【问题标题】：Cant save variable into localstorage无法将变量保存到本地存储中
【发布时间】：2016-02-07 10:23:56
【问题描述】：

我正在尝试将一个 URL 保存到我的 chrome 扩展程序的本地存储中。此 URL 是从弹出窗口中的文本输入字段输入的。我只是无法让保存新值的脚本正常工作。

这是我的代码：

popup.html:

<html>
  <head>
    <title>Favourite.es Settings</title>
      <link rel="stylesheet" href="/mdl/material.min.css">
      <script src="/mdl/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="/css/settings.css">
      <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.blue-light_blue.min.css" />
  </head>
  <body>
      <script src="popup.js"></script>
      <div class="container">
        <img src="/img/Branding.png">
      </div>
      <div class="container">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="width: 80%; margin-left:30px;">
            <input class="mdl-textfield__input" type="text" id="bgurl">
            <label class="mdl-textfield__label" for="sample3">Background URL:</label>
          </div>
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" style="margin-left:30px" onclick="save();">
          Save
        </button>
      </div>
  </body>
</html>

popup.js：

function save(){
    console.log("Init SAVE");
    var bgurl = document.getElementById("bgurl");

    localStorage.setItem("bgurl", bgurl.value);
}

【问题讨论】：

你写的代码没有问题：jsfiddle.net/3gkhyxjn 如果你的浏览器支持localstorage，你应该很好。你确定你正确地引用了你的脚本文件吗？按 F12，您的开发工具中弹出任何错误？
@MisterEpic 不，完全没有错误。我觉得问题可能出在按钮中的 onclick 上。我什至无法运行警报...在 chrome 扩展弹出窗口中有什么可以阻止它吗？
嗯，不确定。您可以在popup.js 中设置事件处理程序吗？
@MisterEpic 抱歉，我实际上对 JS 不太了解，我该怎么做？
似乎没有成功...虽然我确实在某处看到 chrome 扩展不喜欢内联脚本，所以我认为这是朝着正确方向迈出的一步。

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

【解决方案1】：

设法让它使用这个来工作：

(popup.js)

function save(){
    console.log("Init SAVE");
    var bgurl = document.getElementById("bgurl");

    localStorage.setItem("bgurl", bgurl.value);
}

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('btn');
    // onClick's logic below:
    link.addEventListener('click', function() {
        save();
    });
});

【讨论】：

【解决方案2】：

我之前遇到过这个问题。

尝试把最后一行代码改成

window.localStorage.setItem("bgurl", bgurl.value);

【讨论】：

【解决方案3】：

这对我来说很好。如果第一个语句不起作用，请尝试第二个语句。检查 Chrome 控制台中是否有 javascript 错误。

if (window.localStorage) {

    localStorage.setItem("myKey", mykeyval);
    // OR this works too
    localStorage["myKey"] = mykeyval;

}

【讨论】：