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>