1

I am trying to store the data a user enters inside a textarea in a popup.html. Using jQuery on window unload the data should be synced and on window ready the data should be restored. However, when opening popup.html the content of the textarea is undefined. This is the jQuery code which I am loading in popup.html:

$(window).unload (
    function save() {
        var textarea = document.querySelector("#contacts").value;
        // Old method of storing data locally
        //localStorage["contacts"] = textarea.value;

        // Save data using the Chrome extension storage API.
        chrome.storage.sync.set({contacts: textarea}, function() {
            console.log("Contacts saved");
        });
    });

$(window).ready(
    function restore() {
        var textarea = document.querySelector("#contacts");
        // Old method of retrieving data locally
        // var content = localStorage["contacts"];
        chrome.storage.sync.get('contacts', function(r) {
            console.log("Contacts retrieved");
            var content = r["contacts"];
            textarea.value = content;
        });
    });
3
  • 2
    It seems that once unload has fired, it is too late to successfully perform a sync.set operation. Have you considered incrementally storing the data, or experimenting with onbeforeunload? (I'm not sure onbeforeunload will work either, though.)
    – apsillers
    Jul 30, 2013 at 13:34
  • Using $(window).onbeforeunload() raises Uncaught TypeError: Object [object Object] has no method 'onbeforeunload'.
    – orschiro
    Jul 30, 2013 at 13:58
  • Aside from the technical problem of using the unload event for saving data, you probably don't want to risk the user's data waiting for that part of the page lifetime anyway. The browser might crash, the user might experience a power failure, who knows. Better to design for a save right after the data's creation/alteration.
    – sowbug
    Jul 31, 2013 at 4:27

2 Answers 2

4

From popup.js you can invoke a method in background.js file to save the data:

popup.js:

addEventListener("unload", function(){
    var background = chrome.extension.getBackgroundPage();
    background.mySavefunction(data);
}

background.js:

function mySaveFunction(data){
    chrome.storage.sync.set(data, function(){
       console.log("Data saved.");
    });
}
1

I found a solution. Instead of using $(window).unload() I now use a submit button which needs to be clicked before closing popup.html:

$("#save-button").click(function() {
        var textarea = document.querySelector("#contacts").value;
        var save = {};
        save["contacts"] = textarea;
        // Save data using the Chrome extension storage API.
        chrome.storage.sync.set(save, function() {
            console.log("Contacts saved");
        });
        $("#confirm").text("Contacts saved.").show().fadeOut(5000);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.