JSFiddle - React, Tailwind, and code Playground

by caio

HTML

<button class='setData'>setData</button>

JavaScript

/* Functions */
var setData = function(name, mail) {
  var data = {
    'name': name,
    'mail': mail
  };

  localStorage.setItem('myApp', JSON.stringify(data));

  if (navigator.onLine) {
    sendData();
  }
}

var getData = function() {
  return localStorage.getItem('myApp');
}

var sendData = function() {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/echo/json/', true);
  xhr.send(getData());

  return localStorage.removeItem('myApp');
}

/* Events */
window.addEventListener('online', function(event) {
  sendData();
});

document.querySelector('.setData').addEventListener('click', function(event) {
  setData('Name', '[email protected]');
});