Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Build a Site Bookmark App with JavaScript by using Local Storage
In this tutorial, we'll build a Site Bookmark app using JavaScript, HTML, and CSS. The app will use Local Storage to save bookmarks permanently without requiring a database.
Local Storage is a web storage API that allows client-side data storage. Data is stored as strings and persists even after closing the browser session. Storage capacity ranges from 2MB to 10MB depending on the browser.
Features
Our bookmark app will include:
Add new bookmarks with site name and URL
Visit saved websites
Delete unwanted bookmarks
Persistent storage using Local Storage
File Structure
index.html - Main HTML structure
style.css - Styling and layout
main.js - JavaScript functionality
HTML Structure
The HTML contains a header, form for adding bookmarks, and a section to display saved bookmarks:
<!DOCTYPE html>
<html>
<head>
<title>Build a Site Bookmark App with JavaScript by using Local Storage - TutorialsPoint</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>App for Bookmarking Sites on Tutorialspoint!</h1>
<div class="container">
<form class="form" action="#">
<div class="input-field">
<label for="site_name">Site Name</label>
<input name="site_name" type="text" placeholder="name">
</div>
<div class="input-field">
<label for="url">Site URL</label>
<input name="url" type="text" placeholder="https://www.mysite.com">
</div>
<button class="save_button">Save</button>
</form>
<h2>Saved Bookmarks</h2>
<div class="view_bookmarks"></div>
</div>
<script src="./main.js"></script>
</body>
</html>
CSS Styling
The CSS provides a clean, modern interface with flexbox layout and responsive design:
*{
box-sizing: border-box;
font-family: sans-serif;
}
body{
margin: 0;
padding: 0;
background-color: #979090;
}
a{
text-decoration: none;
color: #fff;
}
/*Title style*/
h1{
width: 100%;
height: 85px;
text-align: center;
line-height: 85px;
margin: 0;
padding: 0;
background-color: #37abbb;
letter-spacing: 2px;
word-spacing: 8px;
color: #fff;
}
h2{
color: #fff;
padding-left: 30px;
}
.container{
width: 620px;
min-height: 160px;
background-color: #464040;
margin: 0 auto;
}
/*form section style*/
.form{
width: 100%;
height: auto;
background-color: #37abbb;
padding: 38px 48px;
margin: 20px 0;
}
.input-field{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 15px;
}
.input-field input[type="text"]{
width: 245px;
height: 26px;
outline: none;
border: none;
background-color: #fff;
border-bottom: 2px solid #fff;
padding-left: 10px;
color: #000000;
}
.input-field label{
color: #fff;
font-weight: bold;
margin-bottom: 5px;
}
.save_button{
display: block;
margin: 0 auto;
border: none;
width: 69px;
height: 26px;
background-color: #fff;
color: #000;
cursor: pointer;
outline: none;
font-weight: 500;
}
/*Bookmarks section style*/
.view_bookmarks{
width: 100%;
background-color: #37abbb;
padding: 20px;
}
.btn_bookmark{
display: flex;
align-items: center;
width: 305px;
height: 42px;
padding: 5px 20px;
background-color: #37abbb;
margin-bottom: 10px;
background-color: #464040;
}
.btn_bookmark span{
flex: 1;
font-weight: bold;
letter-spacing: 1.5px;
color: #fff;
}
.btn_bookmark .visit{
width: 52px;
height: 26px;
line-height: 25px;
text-align: center;
background-color: #37abbb;
color: #fff;
border-radius: 5px;
margin: 0 5px;
font-weight: 500;
}
.btn_bookmark .delete{
width: 62px;
height: 26px;
line-height: 25px;
text-align: center;
background-color: #e91e63;
border-radius: 5px;
font-weight: 500;
}
JavaScript Functionality
Step 1: DOM Selection and Initialization
First, we select the necessary DOM elements and initialize Local Storage:
// Select DOM elements
let button = document.querySelector(".save_button");
let siteName = document.querySelector("[name='site_name']");
let url = document.querySelector("[name='url']");
let view_bookmarksSection = document.querySelector(".view_bookmarks");
// Initialize Local Storage for bookmarks
if(typeof(localStorage.btn_bookmark) == "undefined"){
localStorage.btn_bookmark = "";
}
Step 2: Form Submission and Validation
Handle form submission with validation to ensure proper data entry:
// Add event listener for form submission
button.addEventListener("click", function(e){
e.preventDefault();
let patterURL = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
let arrayItems, check = false, adr, itemAdr;
// Form validation
if(siteName.value === ""){
alert("you must fill the siteName input");
} else if(url.value === ""){
alert("you must fill the url input");
} else if(!patterURL.test(url.value)){
alert("you must enter a valid url");
} else{
arrayItems = localStorage.btn_bookmark.split(";");
adr = url.value;
adr = adr.replace(/http:\/\/|https:\/\//i, "");
arrayItems.length--;
// Check if URL is already bookmarked
for(item of arrayItems){
itemAdr = item.split(',')[1].replace(/http:\/\/|https:\/\//i,"");
if(itemAdr == adr){
check = true;
}
}
if(check == true){
alert("This website is already bookmarked");
}
else{
// Add bookmark to localStorage
localStorage.btn_bookmark += `${siteName.value},${url.value};`;
addBookmark(siteName.value, url.value);
siteName.value = "";
url.value = "";
}
}
});
Step 3: Add Bookmark Function
Create HTML elements for each bookmark with visit and delete buttons:
// Function to add bookmark to the display
function addBookmark(name, url){
let dataLink = url;
// Ensure URL has protocol
if(!url.includes("http")){
url = "//" + url;
}
let item = `<div class="btn_bookmark">
<span>${name}</span>
<a class="visit" href="${url}" target="_blank"
data-link='${dataLink}'>Visit</a>
<a onclick="removeBookmark(this)"
class="delete" href="#">Delete</a>
</div>`;
view_bookmarksSection.innerHTML += item;
}
Step 4: Load Saved Bookmarks
Retrieve and display bookmarks from Local Storage on page load:
// Function to fetch and render saved bookmarks
(function fetchBoookmark(){
if(typeof(localStorage.btn_bookmark) != "undefined" && localStorage.btn_bookmark !== ""){
let arrayItems = localStorage.btn_bookmark.split(";");
arrayItems.length--;
for(item of arrayItems){
let itemSpli = item.split(',');
addBookmark(itemSpli[0], itemSpli[1]);
}
}
})();
Step 5: Delete Bookmark Function
Remove bookmarks from both display and Local Storage:
// Function to remove bookmark
function removeBookmark(thisItem){
let arrayItems = [],
index,
item = thisItem.parentNode,
itemURL = item.querySelector(".visit").dataset.link,
itemName = item.querySelector("span").innerHTML;
arrayItems = localStorage.btn_bookmark.split(";");
for(i in arrayItems){
if(arrayItems[i] == `${itemName},${itemURL}`){
index = i;
break;
}
}
// Update localStorage
index = arrayItems.indexOf(`${itemName},${itemURL}`);
arrayItems.splice(index,1);
localStorage.btn_bookmark = arrayItems.join(";");
// Update bookmark display
view_bookmarksSection.removeChild(item);
}
How It Works
Output
The completed bookmark app provides a clean interface where users can:
Enter site names and URLs through a simple form
View all saved bookmarks with visit and delete options
Access websites directly by clicking "Visit"
Remove unwanted bookmarks with the "Delete" button
All bookmarks persist between browser sessions thanks to Local Storage, providing a reliable bookmarking solution without requiring a backend database.
Conclusion
This bookmark app demonstrates practical use of Local Storage, form validation, and dynamic DOM manipulation. You can extend it further by adding features like bookmark categories, search functionality, or bookmark editing capabilities.
2K+ Views
