How to save local data in Chrome Extension

I have the following code:

chrome.storage.sync.get(function(data) {});
var addBtn = document.getElementById('addBtn');

addBtn.addEventListener('click', () => {
  document.getElementById('downloadPart').style.display = "block";
  var addCnt = 0;
  var showPart = document.getElementById('urlCover');
  var mainForm =
    '<label><input type="checkbox" class="checkBoxes" id="check' + addCnt + '"><input type="url" class="urlTitles" id="sepUrl' + addCnt + '" value="" maxlength = "40"></label>';
  var addDiv = document.createElement('div');
  addDiv.setAttribute("id", "keyForm" + addCnt);
  addDiv.innerHTML = mainForm;
  showPart.appendChild(addDiv);
  chrome.tabs.getSelected(null, function(tabs) {
    var userVal = document.getElementsByClassName('urlTitles');
    var pageUrl = tabs.url;
    var saveVal, urlCnt;
    for (urlCnt = 0; urlCnt < userVal.length; urlCnt++) {
      userVal[urlCnt].value = pageUrl;
      saveVal = userVal[urlCnt].value;
      console.log(saveVal);
      chrome.storage.sync.set({
        'saveVal': saveVal
      });
    }
  });
  addCnt++;
});

There's a default form in the HTML file.

If I click the addBtn, downloadPart's display changes from none to block, and it makes the input forms into labels which contain the recent page's URL.

It works well if I click Btn. However, if I turn it off, all the data disappears, and only the default HTML form remains (the label form and downloadBtn disappear).

I know I can use Chrome's storage, but it's really hard to understand, and it gives me errors. I don't know how to change my code to get it working correctly.

I really need your help. Please help me!