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>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
// Triggers append
$("#append").click(function(){
// appends the text <h1>Appended text.<\/h1> to the .box
$(".box").append(" <h1>Appended text.<\/h1>");
});
//Triggers localStorage.setItem
$("#saveToLocalStorage").click(function(){
// localStorage set Item (localStorageName) and saves ( $(".box").html() )
localStorage.setItem("localStorageName", $(".box").html());
});
// Triggers localStorage.removeItem
$("#removeSavedLocalStorage").click(function(){
// removes ( localStorageName ) from browser memory
localStorage.removeItem("localStorageName");
// reloads the page
location.reload();
});
// if the localStorageName is SET or not NULL
if(localStorage.getItem('localStorageName') !== null) {
// Triggers or call the saved localStorage by name localStorageName
$(".box").html(localStorage.getItem("localStorageName"));
}
});
</script>
<title></title>
</head>
<body>
<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>
</body>
</html>
23 Related pages
- About jQuery
- AJAX Introduction
- Copy CSS style from an element and pass it to other element, jQuery
- Dark Light Mode website, jQuery
- if the window size is bigger than 1000px do stuff. jQuery
- Include CDN jQuery
- jQuery Checkbox if else
- jQuery input radio button
- jQuery library included locally
- jQuery Limited interval
- jQuery localStorage explained
- jQuery Next and Prev element addclasses
- jQuery Radio button enable input
- jQuery Refresh the page to change the background-colour
- jQuery Screen size of this device in px
- jQuery setInterval, On page load
- jQuery Start / Stop interval
- jQuery Start interval with start button
- jquery Tick box to enable a button
- jQury plugin form validation
- Jump to Section in page, Distance to the top page, Smooth scroll
- setTimeout, jQuery
- Table Search with jQuery Misc