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

API Trace View

Struggling with slow API calls?

Dan Mindru walks through how he used Sentry's new Trace View feature to shave off 22.3 seconds from an API call.

Get a practical walkthrough of how to identify bottlenecks, split tasks into multiple parallel tasks, identify slow AI model calls, and more.

Read more →

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay