ZaZaKi, a web developer Between Manchester UK & Rotterdam NL. © 2015-2024.

jQuery localStorage explained

This example demonstrate how the localStorage works.

click on Append text button  several times to append some texts to the container called box and refresh the page you will the the appended texts disappears too but if you  press the Save to the localStorage button and refresh page the texts inside the box container will stay.

Press the Remove the localStorage button to remove the localStorage.

<!DOCTYPE html>

<script src="">

// Triggers append
// appends the text <h1>Appended text.<\/h1> to the .box
$(".box").append(" <h1>Appended text.<\/h1>");

//Triggers localStorage.setItem

// localStorage set Item (localStorageName) and saves ( $(".box").html() )
localStorage.setItem("localStorageName", $(".box").html());


// Triggers localStorage.removeItem

// removes ( localStorageName ) from browser memory

// reloads the page


// if the localStorageName is SET or not NULL
if(localStorage.getItem('localStorageName') !== null) {

// Triggers or call the saved localStorage by name localStorageName

<p><button id="saveToLocalStorage">Save to the localStorage</button></p>
<p><button id="removeSavedLocalStorage">Remove the localStorage</button></p>
<p><button id="append">Append text</button></p>
<p class="box"></p>

Front-end , HTML , javascripts , JQuery