8 Data types in total. Main Primitive and Object. There are 7 primitive data types and Object. Together they are 8.
Below is the list:
Boolean – Boolean is a logical data type that can have only the values trueorfalse.
Null – Anull value represents a reference that points, generally intentionally, to a nonexistent or invalid object or address. The meaning of a null reference varies among language implementations.
Undefined – undefined is a primitive value automatically assigned to variables that have just been declared, or to formal arguments for which there are no actual arguments.
Number – JS Number is a numeric data type. Integers, Floats, Doubles, or Bignums — all fall under Number
BigInt – In JavaScript, BigInt is a numeric data type that can represent integers in the arbitrary precision format. In other programming languages different numeric types can exist, for examples: Integers, Floats, Doubles, or Bignums.
String – In any computer programming language, a string is a sequence of characters used to represent text.
Symbol – A value having the data type Symbol can be referred to as a “Symbol value”. In a JavaScript run-time environment, a symbol value is created by invoking the function Symbol which dynamically produces an anonymous, unique value. A symbol may be used as an object property.
Symbol can have an optional description, but for debugging purposes only.
A Symbol value represents a unique identifier. For example,
// here are two symbols with the same description,
let Sym1 = Symbol("Sym");
let Sym2 = Symbol("Sym");
console.log(Sym1 == Sym2); // returns "false"
// Symbols are guaranteed to be unique.
// Even if we create many symbols with the same description,
// they are different values.
let Sym = Symbol("Sym");
alert(Sym); // TypeError: Cannot convert a Symbol value to a string
let Sym = Symbol("Sym");
alert(Sym.toString()); // Symbol(Sym), now it works
window.onload = function () {
//buttons
var addBtn = document.getElementById("add");
var addFormDiv = document.querySelector(".addForm");
//form fields:
var fullname = document.getElementById("fullname");
var phone = document.getElementById("phone");
var email = document.getElementById("email");
//address book display
var addBookdiv = document.querySelector(".addbook");
//Intialize storage array
var dataArray = [];
//eventListeners
addBtn.addEventListener("click", addToBook);
addBookdiv.addEventListener("click", removeContact);
function structure(fullname, phone, email) {
this.fullname = fullname;
this.phone = phone;
this.email = email;
}
function addToBook() {
//test if fields are empty
var testIfempty = fullname.value != '' && phone.value != '' && email.value != '';
//console.log(testIfempty);
if (testIfempty) {
//add contents to array and add contents to localstorage
var obj = new structure(fullname.value, phone.value, email.value);
dataArray.push(obj);
localStorage['contactInfo'] = JSON.stringify(dataArray);
//clear form
clearForm();
//update display from the form data collected
displayContactInfo();
}
}
function clearForm() {
var filledForm = document.querySelectorAll(".formFields");
for (var i in filledForm) {
filledForm[i].value = "";
}
}
function removeContact(e) {
if (e.target.classList.contains("removeButton")) {
var rmId = e.target.getAttribute("data-id");
dataArray.splice(rmId, 1);
//update localstorage
localStorage['contactInfo'] = JSON.stringify(dataArray);
displayContactInfo();
}
}
function displayContactInfo() {
//look for localstorage key if not present create it
//if exists load content from LS and loop it on page for div to populate
if (localStorage['contactInfo'] === undefined) {
localStorage['contactInfo'] = "[]" //string
} else {
dataArray = JSON.parse(localStorage['contactInfo']);
addBookdiv.innerHTML = '';
for (var i in dataArray) {
var str = '<div class="entry">';
str += '<div class="name"><p>' + dataArray[i].fullname + '</p></div>';
str += '<div class="email"><p>' + dataArray[i].email + '</p></div>';
str += '<div class="phone"><p>' + dataArray[i].phone + '</p ></div>';
str += '<div class="del"><a href="#" class="removeButton" data-id="' + i + '" >Delete</a></div>';
str += '</div >';
addBookdiv.innerHTML += str;
}
}
}
displayContactInfo();
}
Notes:
The read-only localStorage property allows you to access a Storage object for the Document‘s origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.
**The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings).**
