I'm trying to save the data coming from my popup.js into the local storage of the website in which the popup was opened. I am using the chrome.runtime.onMessage.addListener() to get the data into my content script and saving it in the local storage. While checking it in real time on the browser, the key 'url' in the local storage briefly gets set to the data being sent but after less than one second, says 'undefined'. How do I fix this? Will this be easier to accomplish using cookies?

contenscipt.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        localStorage['url'] = request.url_;
        if(window.location.href.includes(request.url_)){
            document.querySelector('body').innerHTML= "Full Page has been replaced with this";
        }
    }
  );

popup.js

function ping(url){
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {url_: url}, function(response) {
      if(chrome.runtime.lastError) {
        setTimeout(ping, 1000);
      }
    });
  });
}

document.getElementById('id_save').onclick = () => {
    ping(document.getElementById('id_memo').value);
}