Local storage Note

#fscss #css #json #html

JavaScript Local storage note

JavaScript:

let title = document.getElementById('title');
let text = document.getElementById('body');
let saveBtn = document.getElementById('save');
let display = document.getElementById('display');
let pst = document.getElementById('pst');
let clr = document.getElementById('clr');
saveBtn.onclick = function(){
  if(text.value == ''){
    alert('Body text must not be emty!');
  }
  else{
  pst.innerHTML += `<div id="saver">` + `<h3 id="tt">` + title.value + `</h3>` + `<button>` + text.value + `</button>` + `</div>`;
    window.localStorage.setItem('str', JSON.stringify(pst.innerHTML))
    Pst()
  }
}
function Pst(){
 pst.innerHTML = JSON.parse(window.localStorage.getItem('str'));
}
clr.onclick = function(){
  pst.innerHTML = '';
  window.localStorage.setItem('str', JSON.stringify(pst.innerHTML));
}
Pst();

CSS:

      #display{
    Border: 4px solid;
   } 
  #saver{
    Border: 2px solid;
   } 
  #clr{
    Margin: 5%;
   } 
  #editor{
    Box-shadow: 0 0 3px red;} 
  #editor input{
    Width: 80%;
    Box-shadow: 0 2px;
    Color: #fff;
    -webkit-text-stroke: 1px #111;
    }
  #editor textarea{ 
    width: 80%;
    Display: block;
    Margin: 5% 2px 2px 9%;
    Box-shadow: 0 0 3px;
    Text-align: center;
    }
  #editor button, #display button{
    background: conic-gradient(navy, #44f);
    Border-radius: 10px;
    Border: 4px solid #0f07f0;
    Width: 80%;
    Font-size: 24px;
    Color: white;
    -webkit-text-stroke: 2px red;
    Font-weight: 800;
    Text-transform: uppercase;
   }

HTML:

<section id="editor">
  <div><input type="text" id="title"><textarea id="body" rows="9" cols="40"></textarea><button type="smt" id="save">Store</button></div>
</section>
<div style="border: 2px solid;"></div>
<section id="display">
  <bdo id="pst"></bdo>
  <button id="clr">CLEAR ALL</button>
</section>