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>