Fundamentals of Client Side Javascript

Why read this?

Often when learning client-side javascript people skip right to DOM manipulation with the native DOM API (document.querySelector) or with jQuery. While these are important and pivotal skills to have there are several javascript browser APIs that can be used to solve all sorts of problems.

The ones I’ll be covering

navigator API

The navigator object has several functions that can be used to determine

  • what browser is being used (navigator.userAgent)
  • whether there is an internet connection (
  • register service workers

window API

The window object really bundles most of the APIs I’ll be talking about but one of the parts of it people may not be aware of but is quite useful is the location property.


the customElements registry allows you to register elements with HTML tags, also known as web components.


The document object allows us to manipulate, create, and remove elements from the DOM (document object model). This is how we make sites dynamic, exciting, and interactive. jQuery is a popular abstraction over this API, the most downloaded javascript library of all time. Modern Frontend frameworks like React, Vue, Angular, and Svelte also provide a large amount of abstraction over this API.

localStorage and sessionStorage

The storage API allows you to store data as strings in the browser.

  • localStorage: saves the data until you remove it
  • sessionStorage: saved the data until the browser is closed

They both work the same way.

Adding Data

const data = {
name: "Alex",
age: 35
localStorage.setItem("data", JSON.stringify(data))
sessionStorage.setItem("data", JSON.stringify(data))

retrieving data

const extractedData = JSON.parse(localStorage.getItem("data"))const extractedData2 = JSON.parse(sessionStorage.getItem("data"))

Removing Data




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Merced Coder

Alex Merced Coder


Alex Merced is a Developer Advocate for Dremio and host of the Web Dev 101 and Datanation Podcasts.