loading...

Restorator.js - Synchronise your INPUT DOM

harveydanger profile image HarveyDanger ・2 min read

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!

Posted on Oct 4 '19 by:

harveydanger profile

HarveyDanger

@harveydanger

You simply can't do things without algoritms

Discussion

markdown guide