JavaScript: Saving Textarea Content to LocalStorage
Just add the following attribute to any textarea or text input with any id:data-save-local="true"
Then add the following script:
// Data attribute based local storage
function saveDataToLocalStorage() {
if (document.readyState === 'complete') {
const elementsToSave = document.querySelectorAll('[data-save-local="true"]');
elementsToSave.forEach(element => {
const id = element.id;
const value = element.value;
localStorage.setItem(id, value);
});
}
}
function loadDataFromLocalStorage() {
const elementsToLoad = document.querySelectorAll('[data-save-local="true"]');
elementsToLoad.forEach(element => {
const id = element.id;
const savedValue = localStorage.getItem(id);
if (savedValue) {
element.value = savedValue;
}
});
}
document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('beforeunload', saveDataToLocalStorage);
loadDataFromLocalStorage();
const elementsToWatch = document.querySelectorAll('[data-save-local="true"]');
elementsToWatch.forEach(element => {
element.addEventListener('input', saveDataToLocalStorage);
});
});