Trying to save and fetch a Javascript object using chrome.storage API?

问题

I'm building my first chrome extension and I want it to track the TV series I watch and I'm currently trying to get it to save metadata on the series that I am following.

I have a content script that returns the title, the newest episode (and the URL of this episode) as well as the URL of the cover image of the series. I am currently trying to save it with some code on my background script (I have made sure to include "storage" under the permissions section of the manifest file).

Since my app needs to be able to track more than one series, I made an object constructor that stores the metadata I fetch using an object:

function Series(nTitle, nNewEp, nNewEpURL, nImage) {
    this.anTitle = nTitle;
    this.anNewEp = nNewEp;
    this.anNewEpURL = nNewEpURL;
    this.anImage = nImage;
}

I then attempt to save this data via the following code:

var bkg = chrome.extension.getBackgroundPage();
response.aID = new Series(response.aTitle,response.aNewEp,response.aNewEpURL,response.aImage);

                chrome.storage.sync.set(response.aID, function(){
                    chrome.storage.sync.get(response.aID.anTitle, function(val){
                        bkg.console.log("The saved title is: ", val);
                    });
                    chrome.storage.sync.get(response.aID.anNewEp, function(val){
                        bkg.console.log("The saved newEp is: ", val);
                    });
                    chrome.storage.sync.get(response.aID.anNewEpURL, function(val){
                        bkg.console.log("The saved newEpURL is: ", val);
                    });
                    chrome.storage.sync.get(response.aID.anImage, function(val){
                        bkg.console.log("The saved imageURL is: ", val);
                    });
                });

My callback function was designed to check the process and print out the values that I saved. However I have noticed that every value I return is simply an empty JQuery wrapper. I have tried using val[0] instead of val, but that returns "undefined". That makes me think that I am not saving my object properly or that Chrome does not recognise response.aID as an object. So my question is how can I make something like this work?

回答1:

Your problem is in the callback :

When you are trying to get response.aID.anTitle, your actually looking for the string set in response.aID.anTitle i.e `"my Awesome Soap".

What you want is to get "anTitle" key of the saved object.

One way is to only get the whole storageArea object and just log your wanted keys :

 chrome.storage.sync.set(response.aID, function(){
      chrome.storage.sync.get(function(val){
          bkg.console.log("The saved title is: ", val.anTitle);
          bkg.console.log("The saved newEp is: ", val.anNewEp);
          bkg.console.log("The saved newEpURL is: ", val.anNewEpURL);
          bkg.console.log("The saved imageURL is: ", val.anImage);
      });

or if you really want to make so much call to get():

   chrome.storage.sync.set(response.aID, function(){
        chrome.storage.sync.get('anTitle', function(val){
          bkg.console.log("The saved title is: ", val);
          });
        chrome.storage.sync.get('anNewEp', function(val){
          bkg.console.log("The saved newEp is: ", val);
          });
        chrome.storage.sync.get('anNewEpURL', function(val){
          bkg.console.log("The saved newEpURL is: ", val);
          });
        chrome.storage.sync.get('anImage', function(val){
          bkg.console.log("The saved imageURL is: ", val);
          });
      });

But this one will return an object, containing only your key and its value, so if you need the value you've got to i.e console.log(val.anTitle)

来源：https://stackoverflow.com/questions/32089840/trying-to-save-and-fetch-a-javascript-object-using-chrome-storage-api