0

I have a slider and I want to be able to set the value into local storage so that I can use this value dynamically on a web page.

The part I need help with is chrome.storage.local.set(v);.

$('#slider').on('change', function () {
    var v = $(this).val();
    $( 'div').each(function () {
        this.style.setProperty( 'margin', '10px '+v+'px', 'important' );
    });
    chrome.storage.local.set(v);
});

The variable works perfectly, I just need to be able to save it into localstorage so I can use it. It works before page reload, so all I need now is to be able to put it into storage so on reloading that page it saves the value.

update: is this what you were saying to do?

$('#slider').on('change', function () {
    var v = $(this).val();
    var theKeyForV = chrome.storage.local.get({"keyforv" : v}, 
    chrome.storage.local.set({"keyforv" : v}, 
    function(){ 
        // callback (what goes here?)
    });
    $( 'div').each(function () {
        this.style.setProperty( 'margin', '10px '+theKeyForV+'px', 'important' );
    });
});
john smith
  • 63
  • 10
  • Getting there. Why do you have `keyforv`, `theKeyForV`, and `v`? And you never close your `get` call. You're giving the impression this is your first time programming. Extensions are a bad way to do that, because you're having to learn programming, javascript specific programming, and extension specific javascript all at the same time. But to your original question: storage is only necessary when you're reloading the page. Dynamic usage just requires normal javascript. – Teepeemm Sep 18 '15 at 01:34
  • Storage is needed so that it can remain on page load. However, this variable changes a lot, but, the latest variable should be used on page reload. Still don't know how to use what is stored in localstorage. – john smith Sep 19 '15 at 23:36

2 Answers2

2

You can use this way:

// Set
var dataObj = {};
dataObj["key1"] = "vaule1";
// dataObj["key2"] = "vaule2"; // if you want to set value more than one key.
chrome.storage.local.set(dataObj, function() {
  if(!chrome.runtime.lastError){
      // set storage value successfully.
  }
});

// Get
var dataObj = ["key1"];
// var dataObj = ["key1", "key2"]; // if you want to get value more than one key. 
chrome.storage.local.get(dataObj, function (callback){
   if(callback && callback["key1"]){
     // To Do: handle callback["key1"].
    }
});

// Remove
var dataObj = ["key1"];
// var dataObj = ["key1", "key2"]; // if you want to remove value more than one key.
chrome.storage.local.remove(dataObj, function(callback) {
   if(!chrome.runtime.lastError){
      // remove successfully.
  }
});

To learn more, see chrome.storage

BurningFish
  • 157
  • 1
  • 9
  • thanks, but how do I add in the dynamic variable which changes? I don't know the value, the value changes dynamically and the value itself needs to be a variable, not a value. There will be hundreds of values that constantly change, I need it to remove and set the new one every time it changes. Your code seems a bit complex, I need to just be able to insert a string that is dynamically set into localstorage. – john smith Sep 16 '15 at 19:21
  • and how do i get it and insert it in place of the variable? what do I use? Instead of `+v+` should I put `+key1+`? – john smith Sep 16 '15 at 19:22
  • @sdfasdfacdsgcxzg `dataObj` and `callback` are objects that have the changing values you need. When they change, you can `set` them again. BTW, `localStorage` and `chrome.storage.local` are different things. – Teepeemm Sep 16 '15 at 19:46
  • Sorry, I still don't understand your case. May be you should let us know:1) where your value change? 2) Do you want to save all the changing value or just save the latest value of "v"? In your code, maybe you can use this way: $('#slider').on('change', function () { var v = $(this).val(); // .... other actions. // update value of v in storage.local. chrome.storage.local.set({"keyforv" : v}, function(){ // callback }); }); you should gives each key/value pair to update, as @Teepeemm say. – BurningFish Sep 17 '15 at 02:10
  • 1) huh? 2) just the latest value of `v` is needed. I just updated my question with what I think you're saying to do. Please check it to see if that's what you mean. ------------------------------- ok, still, how do i use them? Put another way, 1) where do I insert the changing value (i.e. the number `12` or the letters `asdf`) so it is saved into localstorage? and 2) how exactly do I insert this localstorage value back into the code where the variable `v` now exists? – john smith Sep 18 '15 at 23:00
1

You may need to pay a little more attention to the api. chrome.storage.local is of type StorageArea. As such, the first (and only mandatory) argument to chrome.storage.local.set is “An object which gives each key/value pair to update”. You’re only giving the second half of that object. Try: chrome.storage.local.set({"sidemargins":v});

Teepeemm
  • 4,331
  • 5
  • 35
  • 58
  • 1
    And when you get around to `get`ting, make sure you understand http://stackoverflow.com/q/23667086/2336725 first. – Teepeemm Sep 15 '15 at 20:01
  • I'm not actually setting the margin, I have lots of different css, I need something where I can place any key not just one specific css. – john smith Sep 16 '15 at 19:12
  • You can make up your own key names, and pass an object with multiple keys to `set`. I just made up the `sidemargins` key, because it seemed to fit your example. – Teepeemm Sep 16 '15 at 19:44
  • BurningFish's example would be the way to go. Or the link I first commented with. If you're having trouble with those, I'd recommend asking a new question showing what you have so far (and link to it from here). But if you don't show that you've really tried to understand the link I've posted, it will get closed pretty quickly as a duplicate of that one. – Teepeemm Sep 17 '15 at 00:33