// jQuery way
$(document).ready(function(){
var username = "";
var nameArray = []; // an empty array
var info = "";
// This is during the application LOAD // ready
if(localStorage.getItem("nameArray")){ // data is in form of string type
nameArray = JSON.parse(localStorage.getItem("nameArray"));
// after the JSON.parse, it becomes an valid JS Object / array/object
info += `<div class="col-md-12
border border-3 border-white rounded p-4 text-white
d-flex justify-content-center" style="background-color: #183153;"><ol>`;
$.each(nameArray, function(key, value){
$.each(value, function(key, value){
info += `<li> ${key} : ${value} </li>`;
})
}) // END OF EACH LOOP
info += "</ol>";
$("#file-data").html(info)
} else {
$("#btn-delete").prop("disabled", false)
.css({"opacity":0.5, "box-shadow":"none"})
}
$("#myform").on("submit", function(event){
event.preventDefault();
info = "";
nameArray = []; // Make sure to empty the array
username = $("#username").val();
if(!username){
$(".error_username").html("Please enter a username!");
$("#username").focus();
return false;
}
if(!localStorage.getItem("nameArray")){
nameArray.push({"username":username});
localStorage.setItem("nameArray", JSON.stringify(nameArray));
// local storage only can store string - no object or array please
// hence we use JSON.stringify() method
} else {
nameArray = JSON.parse(localStorage.getItem("nameArray"));
nameArray.push({"username":username});
localStorage.setItem("nameArray", JSON.stringify(nameArray));
}
// nameArray = JSON.parse(localStorage.getItem("nameArray"));
// console.log(nameArray.length)
if(nameArray.length > 0){
$("#btn-delete").prop("disabled", false)
.css({"opacity":1, "box-shadow":"none"})
}
info += `<div class="col-md-12
border border-3 border-white rounded p-4 text-white
d-flex justify-content-center" style="background-color: #183153;"><ol>`;
$.each(nameArray, function(key, value){
$.each(value, function(key, value){
info += `<li> ${key} : ${value} </li>`;
})
})
info += "</ol>";
$("#file-data").html(info)
$("#myform")[0].reset();
// $("#username").val("");
$("#username").focus();
$(".error_username").html("");
$(".status").html("<h3>Record added to Local Storage !</h3>");
}) // END OF SUBMIT
$("#btn-delete").on("click", function(event){
event.preventDefault();
if(!localStorage.getItem("nameArray")){
alert("No data found in local storage");
$("#username").focus();
return false;
}
alertify.confirm('Confirm Delete', 'Delete Local Storage data?', function(){
alertify.success('Record deleted from Local Storage !')
if(localStorage.getItem("nameArray")){
localStorage.removeItem("nameArray");
$(".status").html("<h3>Record deleted from Local Storage !</h3>");
$("#file-data").html("No data in the local storage")
$("#username").focus();
$(".error_username").html("");
// $("#btn-delete").attr("disabled", true)
$("#btn-delete").prop("disabled", true)
.css({"opacity":0.5, "box-shadow":"none"})
}
}
, function(){
alertify.error('You have canceled the delete')
});
// if(confirm("Confirm delete?")){
// }
})
// function to remove error message on keypress
$("#username").on("keypress", function(){
$(".error_username").html("");
})
}) // END OF READY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Storage</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/fontawesome_all.css">
<!-- alertify JS -->
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/default.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/semantic.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container" style="background-color: #183153;">
<div class="row rounded-3" style="background-color: #183153;">
<div class="col-md-12 form-box rounded-3" style="background-color: #183153;">
<form method="post" id='myform' action="">
<div class="status" id="status">
<h3>Manipulating Local Storage</h3>
</div> <!-- END OF STATUS -->
<hr class="bg-white border border-1 rounded-3 p-1 m-0">
<label for="Username">Username: <span class="error_username error"></span> </label>
<input type="text" id='username' name='username' placeholder="eg: Nick" autofocus />
<input type="submit" class="button" name="submit" value="Submit" id="submit">
</form> <!-- END OF FORM -->
<div class="row d-flex justify-content-center info">
<div class="col-md-12 p-2 file-data" id="file-data">Data will be loaded here</div>
<div>
<button id="btn-delete" class="button">Delete</button>
</div>
</div> <!-- END OF INFO -->
</div> <!-- END OF COL -->
</div> <!-- END OF ROW -->
<div class="row weather-report" style="background-color: #183153;">
</div>
</div> <!-- END OF CONTAINER -->
<script src="js/jquery-3.6.0.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/fontawesome_all.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#file-data {
white-space: pre-line;
}
p {
padding-left: 10px;
text-align: justify;
}
body {
font-family: "League Gothic", Arial, sans-serif;
font-size: 14px;
background-color: #183153;
}
.error_city,
.error_country {
color: red;
font-weight: bolder;
}
.status {
text-align: center;
color: rgb(35, 88, 185);
font-weight: bolder;
/* color: green;
padding: 15px;
margin: 5px; */
}
.status h3 {
text-align: center;
color: white;
padding: 15px;
margin: 5px;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.ok {
color: green;
/* margin-left:20px; */
text-align: center;
font-weight: bolder;
}
.error {
color: red;
/* margin-left:20px; */
text-align: center;
font-weight: bolder;
}
.form-box {
height: auto;
padding: 20px;
margin: 5px auto;
width: 70%;
background-color: lightslategray;
border: 1px groove white;
overflow: hidden;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
.form-box table {
width: 100%;
margin: 5% auto;
}
label {
display: block;
margin: 10px 25px;
font-weight: bold;
color:white;
}
input[type="submit"],
.button {
cursor: pointer;
width: 30%;
/* height: 40px; */
border: none;
background: #881d57;
color: #fff;
margin: 5px 5px;
padding: 10px;
border-radius: 5px;
}
input[type="submit"]:hover,
.button:hover {
background: #c03d7a;
box-shadow: 5px 5px 10px lightslategray;
}
input[type="text"],
input[type="email"] {
/* cursor:pointer; */
width: 50%;
/* height: 20px; */
border: none;
/* margin-left:20px; */
/* background:#881D57; */
/* color:#FFF; */
margin: 5px 25px;
padding: 10px;
border-radius: 5px;
box-shadow: 5px 5px 10px lightslategray;
}
/* Preview */
#loading {
/* width: 100px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
background: white; */
}
/* #loading img{
display: none;
} */
/* Button */
/* .button{
cursor:pointer;
width:30%;
height:40px;
border:none;
background:#881D57;
color:#FFF;
margin:5px 5px;
padding:10px;
border-radius:5px;
} */
.info {
margin: 20px;
padding: 5px;
background-color: bisque;
border-radius: 5px;
border: 2px solid black;
box-shadow: 5px 5px 10px lightslategray;
overflow: hidden;
}
#btn-load {
margin: 20px 0;
/* float:right; */
}
#btn-delete {
margin: 20px 40px;
float: right;
background-color: rgb(205, 60, 41);
}
.map-frame{
width: 95%;
height: auto;
border-radius:4px;
margin:15px auto;
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.form-box{
width:90%;
/* background-color: #27ad85!important; */
}
input[type="text"] {
width:40%;
}
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
.form-box{
width:90%;
/* background-color: #ad2727!important; */
}
}