DEV Community

FSCSS tutorials
FSCSS tutorials

Posted on

Local storage Note

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();

Enter fullscreen mode Exit fullscreen mode

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;
   } 

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay