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:
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.
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.
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.
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.
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.
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.
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.
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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.