AutoSave TextArea Contents

This uses AlpineJS just for the debounce function.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>AutoSave TextArea Contents</title>
<script src="https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js" defer></script>
</head>
<body>

<h2>Enter dummy content in these 2 below boxes</h2>

<section id="RealEstate" x-data="">

    <div>
        <label for="BusinessOverview">
            <span>Enter your business overview here</span><br/>
            <span id="auto-save-BusinessOverview"></span>
        </label>
        <br/>
        <textarea name="BusinessOverview" id="BusinessOverview" cols="100" rows="10" @input.debounce="setContentData('BusinessOverview')">Default BusinessOverview Content</textarea>
    </div>

    <hr/>

    <div>
        <label for="Products">
            <span>Enter your products here</span><br/>
            <span id="auto-save-Products"></span>
        </label>
        <br/>
        <textarea name="Products" id="Products" cols="100" rows="10" @input.debounce="setContentData('Products')">Default Products Content</textarea>
    </div>

</section>

<p>Now, close this tab or window and reload this link again (but in the same browser !) - the content should still be there from the time you last closed the browser.</p>

<script>
const page_section = "RealEstate";

document.addEventListener("DOMContentLoaded", () =>
{
    let stored_data = localStorage.getItem(page_section);

    if (stored_data)
    {
        // Get the JSON string as a JavaScript Object
        stored_data = JSON.parse(stored_data);

        // Loop through all TEXTAREAs in the RealEstate section - we may not want all TEXTAREAs on the document to be auto-saved
        [...document.getElementById(page_section).getElementsByTagName('textarea')].forEach(element =>
        {
            let ID = element.id;

            if (stored_data[ID])
            {
                let content = stored_data[ID]['content'];
                let since = stored_data[ID]['since'];
                let at = (new Date(since)).toLocaleString();                

                if (content)
                {
                    document.getElementById(ID).value = content;
                    document.getElementById('auto-save-' + ID).innerHTML = `Auto Saved Draft on your device at ${at}`;
                }
            }
        });
    }
});

const setContentData = (TextAreaID) =>
{
    let stored_data = localStorage.getItem(page_section);

    // Get the JSON string as a JavaScript Object
    stored_data = JSON.parse(stored_data);

    if (stored_data)
    {
        if (stored_data[TextAreaID])
        {
            stored_data[TextAreaID]['content'] = document.getElementById(TextAreaID).value;
            stored_data[TextAreaID]['since'] = Date.now();                        
        }
        else
        {            
            stored_data[TextAreaID] = 
            {
                'content': document.getElementById(TextAreaID).value,
                'since': Date.now()                                
            };
        }

        localStorage.setItem(page_section, JSON.stringify(stored_data));
    }
    else
    {
        localStorage.setItem(page_section, JSON.stringify(
        {
            [TextAreaID] :
            {
                'content': document.getElementById(TextAreaID).value,
                'since': Date.now()
            }            
        }));
    }

    let auto_saved_time = 'Auto Saved on your device right now at ' + (new Date()).toLocaleTimeString();
    document.getElementById('auto-save-' + TextAreaID).innerHTML = auto_saved_time;
}

/*
"RealEstate": 
    {
        "BusinessOverview":
        {
            "content": "To be an avid Real Estate Agent",
            "since": 1666862350360
        },
        "Products":
        {
            "content": "BluePrints\nTools and Sketches",
            "since": 1666862395951
        }
    }
*/
</script>

</body>
</html>

Gist : https://gist.github.com/anjanesh/7aafd9774da3cae7a2e715894f8aab36

Demo : https://anjanesh.s3.amazonaws.com/demo/autosave-textarea.html

AutoSave TextArea Contents

Comments

More from this blog

Email validity checker using Google's JSON API for DNS over HTTPS (DoH) in Google Sheets

Getting picoclaw to work on Windows

The core use-case of TypeScript

Hashnode's GraphQL API for RSS feeds

make makemigrations work again

Command Palette

Comments

More from this blog