Restorator.js
Restorator - is a tool that synchronises the input from your DOM to Virtual object | Local Storage | Server
Original repo can be found here
This is a simple, yet powerful tool to make an auto save feature on your web app.
Simply put it that way
User enters information to the field, and you control, when a snapshot is synchronised between localStorage and server.
So what's good about it O_o?
Good thing is that Restorator can then obtain a snapshot from localStorage or remote server and restore the last state where the save action had been performed.
Example
- Clone that boilerplate:
git clone https://github.com/HarveyDanger/WebpackBabel-minimal.git restorator_demo
this is basically a minimal setup for your demo example. Btw, do not hesitate to use it as well :)
- Install dependencies and restorator:
npm install && npm install restoratorjs
- Now create a public folder with index.html inside
mkdir public && touch public/index.html
- Paste contents into that file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>RestoratorJS demo</title>
</head>
<body>
<input type="text" id="one">
<textarea name="two" id="two" cols="30" rows="10"></textarea>
<input type="text" id="three">
<button id="sync">Sync</button>
<script src="bundle.js"></script>
</body>
</html>
- Navigate to src/main.js and insert the following
import { Restorator } from 'restoratorjs';
const r = new Restorator({
name: "dev_to_example", // instance reference, useful if you use several of those
applicable:['input', 'textarea', 'select'], // which data fields to sync
ignoreIds: [''], // ignore specific DOM ids
debug: {use: true, highlight: true}, // funny burst in your console :)
saveLocal: true, // save to localStorage
saveRemote: false, // save to Server. Refer to github repo for details https://github.com/HarveyDanger/Restorator
onComplete: (json)=>{
console.log(json);
} // callback on synchronisation
});
let syncButton = document.getElementById('sync');
syncButton.addEventListener('click', ()=>{
// Normally you would not have a save button, so you can bind it to the event
r.Sync({repeat: true, delay: 3000})
// Other parameters that Sync accepts are crucial for the Server sync. Refer to github.
})
- Now simply run
npm start
How can I test it?
After you started a dev server, you can now fill data to your fields. open a console and then push Sync button. You will see, that Restorator has collected all the data and saved it locally. This example does not assume that you use a server for Sync (it is a separate long topic with backend part, but basically Restorator pushes JSON object with all the inputs).
Now, reload the page and hit Sync once again and voila. Previous state has been restored.
Thanks for reading!
Hope you liked it!
Top comments (0)