Thanks to localStorage. Saving, retrieving and removing temporary data is very easy. To save data, we call this function: localStorage.setItem(); To retrieve data, we call localStorage.getItem(); and to remove it we call localStorage.removeItem();.
Below is simple source code to show you how this three functions work:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Experiments</title>
<style>
.myBox{
border: 1px solid black;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<script>
//localStorage.removeItem(key);
</script>
<div class="myBox">
<h1>Saving Data</h1>
<input id="myInput" placeholder="Type anything...">
<button onclick="saveData()">Save</button>
</div>
<div class="myBox">
<h1>Saved Data</h1>
<p id="savedData"></p>
</div>
<div class="myBox">
<h1>Delete Data</h1>
<button onclick="deleteData()">Delete</button>
</div>
<script>
if(localStorage.getItem("myData") === null) document.getElementById("savedData").innerHTML = "No data is saved.";
else document.getElementById("savedData").innerHTML = "Saved data: " + localStorage.getItem("myData");
function saveData(){
var newData = document.getElementById("myInput").value;
if(newData != "") localStorage.setItem("myData", newData);
location.reload();
}
function deleteData(){
if(localStorage.getItem("myData") !== null) localStorage.removeItem("myData");
location.reload();
}
</script>
</body>
</html>
You can see live result of these codes here:
loading...