En mi página web estática, los usuarios deberían poder editar varios textos y almacenar los cambios localmente para continuar editando más tarde. Reuní esto a partir de fragmentos de código de otros (yo mismo no soy un usuario muy competente de Javascript).
https://jsfiddle.net/x2thdrw3/54/
window.onload = function() { if (localStorage.getItem('userContent01')) { document.querySelector('#userContent01').innerHTML = localStorage.getItem('userContent01'); } if (localStorage.getItem('userContent02')) { document.querySelector('#userContent02').innerHTML = localStorage.getItem('userContent02'); } } let editBtn01 = document.querySelector('#userContent01_edit'); let content01 = document.querySelector('#userContent01'); editBtn01.addEventListener('click', () => { localStorage.setItem('userContent01', content01.innerHTML); }); let editBtn02 = document.querySelector('#userContent02_edit'); let content02 = document.querySelector('#userContent02'); editBtn02.addEventListener('click', () => { localStorage.setItem('userContent02', content02.innerHTML); }); .userContent { border: ridge 2px; padding: 15px; width: 100%; min-height: 2em; overflow: auto; } <div class="userContent" , id="userContent01" contenteditable="true"> Edit this first text and then click save to store your changes for later. </div> <button id="userContent01_edit">Store changes to the first text locally</button> <div class="userContent" , id="userContent02" contenteditable="true"> Edit this second text and then click save to store your changes for later. </div> <button id="userContent02_edit">Store changes to the second text locally</button> <br> <br> <input type="button" value="Reload and keep local storage" onClick="location.reload()"> <input type="button" value="Reload and clear local storage" onClick="localStorage.clear() + location.reload()">El ejemplo no es eficiente porque el código Javascript crecería con cada texto adicional.
¿Cuál sería una forma más eficiente de tener varios de estos divs editables y almacenables en mi página web?
En la página web, los divs no aparecen uno tras otro, como en el ejemplo, sino con otro contenido no editable en el medio.
PD: el código funciona en jsfiddle pero stackoverflow arroja un error de seguridad. No entiendo porque. (Aclarado por J. Titus en los comentarios).
PPS: Soy consciente de que estoy haciendo una pregunta bastante específica. Gracias por tu ayuda.
Hay algunas maneras en las que puedes hacer esto. Una opción es recorrer cada div con "contenteditable" y aplicar la lógica
window.onload = () => document.querySelectorAll('[contenteditable="true"]').forEach((element) => { const elementId = element.getAttribute("id"); if (localStorage.getItem(elementId)) { element.innerHTML = localStorage.getItem(elementId); } document .getElementById(`${elementId}_edit`) .addEventListener("click", () => { localStorage.setItem(elementId, element.innerHTML); }); });Una implementación muy compacta. ( Parece largo debido a todos los comentarios. )
window.onload = function () { //Get all userContent elements let userContent_els = document.querySelectorAll(".user-content"); //Loop over each userContent element userContent_els.forEach((el) => { // easy access using the id of the user content as key let key = el.id; let value = localStorage.getItem(key); if(value) el.innerText = value; }); }; //Get all button elements let editButton_els = document.querySelectorAll(".edit-button"); //Loop over each button editButton_els.forEach((button) => { let buttonId = button.id; button.addEventListener("click", () => { /* Storage key is a combination of 'content-' and the button 'id'. This combination is intentional as to make it easier getting the data later as we just have to get the content 'id' which is set to 'content-01', 'content-02' etc..*/ // Get corresponding userContent element let content_el = document.querySelector(`#content-${buttonId}`); localStorage.setItem( "content-" + buttonId, content_el.innerText ); }); });HTML
<div class="user-content" , id="content-01" contenteditable="true"> Edit this first text and then click save to store your changes for later. </div> <button class="edit-button" id="01">Store changes to the first text locally</button> <div class="user-content" , id="content-02" contenteditable="true"> Edit this second text and then click save to store your changes for later. </div> <button class="edit-button" id="02">Store changes to the second text locally</button> <br> <br> <input type="button" value="Reload and keep local storage" onClick="location.reload()"> <input type="button" value="Reload and clear local storage" onClick="localStorage.clear() + location.reload()">