JSFiddle - React, Tailwind, and code Playground

by jmarikle

HTML

<div id="001" class="update-card-body" contenteditable="true">
  <p>I want to change this text.</p>
</div>
<div id="002" class="update-card-body" contenteditable="true">
  <p>I want to change this text.</p>
</div>

JavaScript

document.querySelectorAll('[contenteditable=true][id]').forEach(function(el){
  // using 36634163-card-body-data as the key to ensure uniqueness.
  // context: http://stackoverflow.com/questions/36634163
  cardBodyData = JSON.parse(localStorage.getItem('36634163-card-body-data'));
  el.addEventListener('input', function(){
	  cardBodyData[el.id] = this.innerHTML;
    localStorage.setItem('36634163-card-body-data',JSON.stringify(cardBodyData));
  });
  if(cardBodyData && cardBodyData[el.id]) {
  	el.innerHTML = cardBodyData[el.id];
  }
  if(cardBodyData === null) cardBodyData = {};
});