You can save the data in the browser, using for example:
-
localStorage : it's just a set of keys and values. Easy to use and almost no learning curve, but somewhat limited as a solution for structured data. To store a structure with several fields you have to save them with JSON.stringify and recover them with JSON.parse.
-
IndexedDB : has a steeper learning curve but allows for more complex operations. There are wrappers like dexie and db.js that simplify its use.
-
Web SQL : (semi-discontinued) provides a relational database, basically a SQLite implementation in the browser. At this point I think only Chrome and Safari support it and is being deprecated .
The important thing is that you manage the change in the state of the connection to know if the user is offline (save locally) and when it goes online (you synchronize what was stored locally to the API).
For example you can check the value of navigator.onLine
function persist(...argumentos...) {
if(navigator.onLine) {
// guardas mediante el API
} else {
// guardas localmente en el browser
}
}
But you will need to detect the change of state to trigger the synchronization of what you saved while offline:
window.addEventListener(‘online’, function(event){
// sincronizas el local con el API
});
You can be guided by this article