anjanesh/autosave-textarea.html

## autosave-textarea.html
<!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>
	<!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>