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!

Blog

Restorator.js - Synchronise your INPUT DOM

HarveyDanger

Restorator.js

Simply put it that way

So what's good about it O_o?

Example

How can I test it?

Join Our Newsletter. No Spam, Only the good stuff.

Related