In this article, we will create a Site Bookmark app using HTML, CSS, and JavaScript. This will help us to store links to our favorite websites without working with any database, and just using the local storage of our browser.
Local Storage is known as the web storage API and allows us to store data on the client-side. Data in local storage is stored in form of strings and persists even after closing the session. Data can only be removed if the user manually deletes it. All the data stays on the client-side, thus there is a defined limitation regarding the length of the values, and we can currently store from 2 MB to 10 MB size of data depending upon the browser we use.
Approach: The Bookmark App which we are designing can do the following:
- Add a new bookmark with the user’s typed name and a website link.
- Contain option of visiting the website
- Deleting the bookmark
- Then always save the bookmarks permanently on LocalStorage
Glimpse of the project:
File structure:
- index.html
- style.css
- main.js
We will use HTML to design the web page structure or layout. This includes:
- Header Section: This includes the heading of our webpage. Here heading is “Site Bookmarker”.
- Container Section: It contains the form and bookmarks section.
- Form Section: It includes two input fields, for site name and link. It also contains one “save” button for submitting the form.
- Bookmarks Section: This section will contain all our saved bookmarks, and will change dynamically based on input.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Site Bookmarker</title> <!-- link the CSS file here --> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Site Bookmarker</h1> <div class="container"> <!-- form to enter details of site --> <form class="form" action="#"> <div class="input-field"> <label for="site_name">Name</label> <input name="site_name" type="text" placeholder="site name"> </div> <div class="input-field"> <label for="url">URL</label> <input name="url" type="text" </div> <button class="save_button">Save</button> </form> <!-- section where bookmarks will be displayed --> <h2>Saved Bookmarks</h2> <div class="bookmarks"></div> </div> <!-- link the JavaScript file here --> <script src="./main.js"></script> </body> </html> |
CSS Styling: CSS is used to style the different portions and make them more visually appealing.
- The form and bookmarks section is displayed using the flex layout.
- Adequate padding and margin are given to each element.
- The text size, color of each element along with background color is such that it is easily readable by the user.
- The individual bookmark would be dynamically added or removed when required.
CSS
*{ box-sizing: border-box; font-family: sans-serif; } body{ margin: 0; padding: 0; background-color: #333333; } a{ text-decoration: none; color: #fff; } /*Styling title*/ h1{ width: 100%; height: 80px; text-align: center; line-height: 80px; margin: 0; padding: 0; background-color: #47CF73; letter-spacing: 2px; word-spacing: 8px; color: #000; } h2{ color: #47CF73; } .container{ width: 600px; min-height: 150px; background-color: #333333; margin: 0 auto; } /*Styling form section*/ .form{ width: 100%; height: auto; background-color: #555555; padding: 40px 50px; margin: 20px 0; } .input-field{ display: flex; flex-direction: column; align-items: center; margin-bottom: 15px; } .input-field input[type="text"]{ width: 250px; height: 25px; outline: none; border: none; background-color: transparent; border-bottom: 2px solid #47CF73; padding-left: 10px; color: #fff; } .input-field label{ color: #47CF73; font-weight: bold; margin-bottom: 5px; } .save_button{ display: block; margin: 0 auto; border: none; width: 70px; height: 25px; background-color: #47CF73; color: #000; cursor: pointer; outline: none; } /*Styling Bookmarks section*/ .bookmarks{ width: 100%; background-color: #555555; padding: 20px; } .bookmark{ display: flex; align-items: center; width: 300px; height: 40px; padding: 5px 20px; background-color: #FAFAFA; margin-bottom: 10px; background-color: #333333; } .bookmark span{ flex: 1; font-weight: bold; letter-spacing: 1.5px; color: #fff; } .bookmark .visit{ width: 50px; height: 25px; line-height: 25px; text-align: center; background-color: #47CF73; color: #000; border-radius: 5px; margin: 0 5px; } .bookmark .delete{ width: 60px; height: 25px; line-height: 25px; text-align: center; background-color: #F44336; border-radius: 5px; } |
Logic: The main logic of our app is implemented using JavaScript. There are several functions that work together for the app.
Step 1 (Selecting all the elements and defining variables):
- The first thing we need is to get a reference for everything we need from the DOM. The required elements in the HTML layout are selected using the querySelector() method.
- This will grab “.bookmarks”, “.save_button”, and input fields like “site_name” and “url” from the DOM and stores them in corresponding variables.
- They are assigned variable names so that they could be easily accessed and modified.
- Also, defining bookmark objects for our local storage to hold all bookmarks.
Javascript
// Select the save button var button = document.querySelector(".save_button"); // Select the input box var siteName = document.querySelector("[name='site_name']"); var url = document.querySelector("[name='url']"); // Select the <div> with class="bookmarks" var bookmarksSection = document.querySelector(".bookmarks"); // Hold bookmarks in local storage if(typeof(localStorage.bookmark) == "undefined"){ localStorage.bookmark = ""; } |
Step2 (Getting values and setting validation for submitting event in form):
- We have EventListener for the save button to listen for a click event on the form. Whenever a click event happens, the function will activate.
- Every time the form is submitted, the page will reload. So to stop that we call e.preventDefault().
- We can get the user’s typed name and url from the siteName.value and url.value respectively.
- Some validation is included to ensure we’re not saving things twice and that our form is not empty.
- After all validation, pass the user typed value to addBookmark() function.
Note: We can store items on localStorage using setItem() method which requires a key and a value. Here we are using “localStorage.bookmark” which automatically creates a bookmark as a key in our localStorage.
Javascript
// listen for form submit button.addEventListener("click", function(e){ // Prevent the page from reloading when submitting the form 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; // Validation of form and URL 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.bookmark.split(";"); adr = url.value; adr = adr.replace(/http:\/\/|https:\/\//i, ""); arrayItems.length--; // Check if website 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{ // If all checks are correct,add bookmark to local storage localStorage.bookmark += `${siteName.value},${url.value};`; addBookmark(siteName.value, url.value); siteName.value = ""; url.value = ""; } } }); |
Step 3 (Add bookmarks to our webpage): This addBookmark() function will take the site name and url as its argument. Then:
- Constructs a new bookmark object.
- This object has a name, URL, and properties of visit and delete.
- Then it pushes that object into our bookmarks section of the HTML page.
- After this, we will call the fetchBookmark() function. This function is responsible for rendering each item to the screen.
Javascript
// Function to add the bookmark function addBookmark(name, url){ let dataLink = url; // After obtaining a bookmark, we display it in a div and add // a button to visit the link or to delete it if(!url.includes("http")){ url = "//" + url; } let item = `<div class="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>`; bookmarksSection.innerHTML += item; } |
Step 4 (Rendering the saved bookmarks): Now we can add bookmarks to our app and store them in localStorage. But when we refresh the page or start a new session all bookmarks disappear from the webpage even if stored in localStorage.
So we need to persist them by fetching the bookmarks from the localStorage, using the fetchBookmark() function.
- First, we will check if the defined bookmark key is empty or not. If it’s not empty then:
- We will create an array of all bookmarks using split() method.
- Next, will loop through each item inside. And for each bookmark, we will get the name and url.
- To display these items we will call the addBookmark() function.
Javascript
// function to render the saved bookmarks (function fetchBoookmark(){ if(typeof(localStorage.bookmark) != "undefined" && localStorage.bookmark !== ""){ let arrayItems = localStorage.bookmark.split(";"); arrayItems.length--; for(item of arrayItems){ let itemSpli = item.split(','); addBookmark(itemSpli[0], itemSpli[1]); } } })(); |
Step 5 (Deleting bookmarks): Visiting a link is straightforward, we simply follow the URL but to delete it, we’ll need to identify the specific URL in our localStorage and then remove it from our object.
For that, we’ll write a removeBookmark() function.
- First, we’ll fetch all the bookmarks from localStorage and store them in an array.
- The splice() method is used to remove items from the array and will return the updated item(s).
- Also, we will use removeChild() method to remove child nodes from the parent node of bookmarks.
Javascript
// Function to remove the bookmark function removeBookmark(thisItem){ let arrayItems = [], index, item = thisItem.parentNode, itemURL = item.querySelector(".visit").dataset.link, itemName = item.querySelector("span").innerHTML; arrayItems = localStorage.bookmark.split(";"); for(i in arrayItems){ if(arrayItems[i] == `${itemName},${itemURL}`){ index = i; break; } } //update the localStorage index = arrayItems.indexOf(`${itemName},${itemURL}`); arrayItems.splice(index,1); localStorage.bookmark = arrayItems.join(";"); //update the bookmark Section bookmarksSection.removeChild(item); } |
Output: And there you have it, our Site Bookmarker app is ready. You can also see the stored bookmarks in localStorage, as shown below:
This Site Bookmarker App contains the basic functionality of adding, storing and deleting using Local Storage. You can get creative and also add functionalities of the edit function, or create collections to store bookmarks using the nested list.
If you like to know more about Local Storage and its features, you can visit the following site: Local and Session Storage
