Cant save variable into localstorage

Question

I'm trying to save a URL into localstorage for my chrome extension. This URL is entered from a text input field in the popup. I just cannot get the script that saves the new value to work.

Heres my code:

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

There is nothing wrong with your code as it is written: https://jsfiddle.net/3gkhyxjn/ If your browser supports `localstorage` you should be good. You sure you are referencing your script file correctly? Hit F12, any errors popping up in your Dev Tools? — Mister Epic, Feb 07 '16 at 01:43
@MisterEpic Nope, no errors at all. I feel like the problem might be with the onclick in the button. I cant get that to even run an alert... Would anything prevent that in a chrome extension popup? — Splycd, Feb 07 '16 at 01:48
Hrm, not sure. Can you set the event handler in your `popup.js`? — Mister Epic, Feb 07 '16 at 01:50
@MisterEpic Sorry, I'm not actually too great with JS, how would I go about doing that? — Splycd, Feb 07 '16 at 01:51
didnt seem to do the trick... Although I did see somewhere that chrome extensions dont like inline scripts, so I think its a step in the right direction. — Splycd, Feb 07 '16 at 02:02
Possible duplicate of [onClick within Chrome Extension not working](http://stackoverflow.com/questions/13591983/onclick-within-chrome-extension-not-working) — Teepeemm, Feb 07 '16 at 02:39
I would suggest you to use chrome.storage API. Read [here](https://developer.chrome.com/extensions/storage) — Nikhil Sharma, Feb 07 '16 at 09:32

score 0 · Answer 1 · answered Feb 07 '16 at 02:15

Managed to get it to work using this:

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

score 0 · Answer 2 · edited Feb 07 '16 at 02:21

0

I had this issue before.

Try to change last line of code to

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

edited Feb 07 '16 at 02:21

Elrond_EGLDer

47,430
25
189
180

answered Feb 07 '16 at 02:15

Kirill kilo-code Babkin

357
2
10

score 0 · Answer 3 · answered Feb 07 '16 at 02:23

This works fine for me. If the first statement doesn't work, try the second statement. Check if you have javascript errors in Chrome console.

if (window.localStorage) {

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

}

Cant save variable into localstorage

3 Answers3