CODEWITHSUNDEEP
javascriptgoogle-chromelocal-storage
user2412593
user2412593

Reputation: 31

Converting local storage to Chrome storage for get and set

I have a userscript which I've turned into a Chrome extension for my users that have Chrome. The userscript sets themes and has themes to choose from, but with just using localStorage, anything other than the main subdomain will just have the default theme. I'm hoping using Chrome's storage API will alleviate that, but I'm stumped as to how to get it working.

Here's the original code:

  hasGM: typeof GM_deleteValue !== "undefined",
  get: function(name)
  {
    var val = this.hasGM ?
          GM_getValue(NAMESPACE + name) :
          localStorage.getItem(NAMESPACE + name);

    if (val != undefined)
      return JSON.parse(val);

    return defaultConfig[name];
  },
  set: function(name, val)
  {
    name = NAMESPACE + name;

    if (typeof val !== "number")
      val = JSON.stringify(val);

    return this.hasGM ?
        GM_setValue(name, val) :
        localStorage.removeItem(name, val),
        localStorage.setItem(name, val);
  }
},

And here's what I have so far, where val is printed as undefined even though I can do a console.log of result[NAMESPACE + name] and the values perfectly in the console.

  hasGM: typeof GM_deleteValue !== "undefined",
  get: function(name)
  {
    names = NAMESPACE + name;
    var val = this.hasGM ?
          GM_getValue(names) :
          chrome.storage.local.get(names, function(result){return result[NAMESPACE + name];});

    if (val != undefined)
      return JSON.parse(val);
    console.log(val);
    return defaultConfig[name];
  },
  set: function(name, val)
  {
    name = NAMESPACE + name;
    setObj={};
    setObj[name]=val;


    if (typeof val !== "number" && this.hasGM)
      val = JSON.stringify(val);
    return this.hasGM ?
        GM_setValue(name, val) :
        chrome.storage.local.remove(name),
        chrome.storage.local.set(setObj);
  }

Basically I just cannot wrap my head around it and need some help

    for (var key in defaultConfig)
      $SS.conf[key] = parseVal(key, this.get(key, function(_arg) {
        var val;

        val = _arg[key];
        return callback(val);
      }));

Upvotes: 3

Views: 1419

Answers (1)

Frances McMullin
Frances McMullin

Reputation: 5706

here's something you could do, I'm omitting the hasGM stuff to make things simpler :

get: function(name, callback) {

  names = NAMESPACE + name;
  chrome.storage.local.get(names, function(val){
    if (val != undefined) {
      callback(JSON.parse(val));
    } else {
      callback(defaultConfig[name]);
    }
  })
},

So this means the code calling your get function would have to change too, I'm sorry, but there really isn't another way. You can (and most people would) convert your synchronous stuff to use the callback pattern as well though, like this :

get: function(name, callback) {

  names = NAMESPACE + name;
  if(this.hasGM) {
    callback(GM_getValue(names));
  } else {
    chrome.storage.local.get(names, function(val){
      if (val != undefined) {
        callback(JSON.parse(val));
      } else {
        callback(defaultConfig[name]);
      }
    })
  }
},

Some rules for dealing with asynchronous functions :

  • They don't return anything! (unless they're promise based)
  • returning something in the callback is pointless, it won't go anywhere!
  • code outside the callback will usually be run before the callback, always assume the callback will be executed at some later time, and therefore you cannot rely on any variable setting/getting happening in the callback!

Upvotes: 3

Related Questions