Chrome Storage sync

[Vanessa Dias]

I am trying to store a array on form submit but I am unable to retrieve and store array in chrome storage sync api

Can someone please help me

[Stefan Van Damme]

Hi Vanessa,

Example Vanilla JavaScript:

document.body.onload = function() {
  chrome.storage.sync.get("data", function(items) {
    if (!chrome.runtime.error) {
      console.log(items);
      document.getElementById("data").innerText = items.data;
    }
  });
}

document.getElementById("set").onclick = function() {
  var d = document.getElementById("text").value;
  chrome.storage.sync.set({ "data" : d }, function() {
    if (chrome.runtime.error) {
      console.log("Runtime error.");
    }
  });
}

Note: Make sure the storage permission is added in your Chrome extension in your manifest file.

https://developer.chrome.com/docs/extensions/mv3/declare_permissions/#:~:text=chrome.sessions%20API.-,%22storage%22,-Gives%20access%20to

Thanks,

Stefan vd

[Vanessa Dias]

Hello Stefan,

Please find my code.

In this scenario I want the storage sync to hold an object with multiple array 

So I have form on submit I want the array to be added to the storage object. But the code I am trying just gives me the last added form data. The previously added data disappear. Do let me know where I am going wrong.

let travel_logs = [];
const addtravel = (ev)=>{
  ev.preventDefault();
  let travel ={
 
    current: document.getElementById("first_name").value,
    destination: document.getElementById("last_name").value,
    start_date : document.getElementById("start_date").value,
    return_date : document.getElementById("return_date").value,
    purpose : document.getElementById("purpose").value
  }

  travel_logs.push(travel);



  // display  purpose
 var travellist=JSON.stringify(travel_logs);
 
  chrome.storage.sync.set({'travellist': travellist}, function() {

  });

 
}



document.addEventListener('DOMContentLoaded', ()=>{
  document.getElementById('form_submit').addEventListener('click', addtravel);
  document.getElementById("form_submit").addEventListener("click", myResetFunction);
 

});

document.body.onload = function() {
  chrome.storage.sync.get({travellist: []}, function(items) {
    if (!chrome.runtime.error) {
   
 var travelids = JSON.parse(items.travellist);
      jQuery.each(travelids, function(index, value) {
        

// display the data added to the form
    $('.travel-rec').append(' <tr><td>'+travelids[0].current+'</td><td>'+travelids[0].destination+'</td><td>'+travelids[0].start_date+'</td><td>'+travelids[0].return_date+'</td><td>'+travelids[0].purpose+'</td> <td><a href="#"><i class="material-icons">more_vert</i></a></td></tr>');
  });
     
    }
  });
}

[Deco]

Your loop implementation is not correct for accessing elements of the array, it will always access index 0 using this implementation, you need to use the index variable. Here is the corrected code:
```let travel_logs = [];

const addtravel = (ev) => {
  ev.preventDefault();

  let travel = {
    current: document.getElementById("first_name").value,
    destination: document.getElementById("last_name").value,
    start_date: document.getElementById("start_date").value,
    return_date: document.getElementById("return_date").value,
    purpose: document.getElementById("purpose").value
  };

  travel_logs.push(travel);

  // display purpose
  var travellist = JSON.stringify(travel_logs);

  chrome.storage.sync.set({'travellist': travellist}, function() {});

};

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('form_submit').addEventListener('click', addtravel);
  document.getElementById('form_submit').addEventListener('click', myResetFunction);
});

document.body.onload = function() {
  chrome.storage.sync.get({travellist: []}, function(items) {
    if (!chrome.runtime.error) {
      var travelids = JSON.parse(items.travellist);
      jQuery.each(travelids, function(index, value) {

        $('.travel-rec').append(' <tr><td>'+value.current+'</td><td>'+value.destination+'</td><td>'+value.start_date+'</td><td>'+value.return_date+'</td><td>'+value.purpose+'</td> <td><a href="#"><i class="material-icons">more_vert</i></a></td></tr>');
      });
    }
  });
};
```

Cheers,
Deco

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/f64ea144-16a0-4024-b4ff-23dc7f451c80n%40chromium.org.