DEV Community: Naresh

Master Client-Side Data Storage: Cookies, Local Storage, and Session Storage

Naresh — Mon, 13 Nov 2023 07:17:11 +0000

Hello 👋 Everyone, welcome to a new post on Storage Mechanisms in Browser. Modern browsers provide different ways to store the data on the client side. This article will look at the most commonly used storage mechanisms. They are

Local Storage
Session Storage
Cookies

For each storage type, we will discuss the following aspects.

Persistence
Accessibility on the Client Side
Transmission to Server
Use cases

Local Storage

LocalStorage is a data storage, that is used to store data across sessions. We usually store non-sensitive information like theme, language, and preferences in LocalStorage.

Persistence:
- Data will persist across sessions, meaning closing the tab or window or Closing the browser will not delete data.
- The user needs to explicitly delete the data from Local Storage.
Accessibility
- LocalStorage items can be accessed by the client-side Javascript.
Transmission To Server
- LocalStorage items will not be transferred on HTTP requests. The user needs to explicitly include these if they want to send it to the Server.
Usage
- Storing non-sensitive data that should persist between the sessions.

Browsers expose an API called localStorage to set and access the items. We store the values in key-value pairs.

// setting a value into localStorage
localStorage.setItem("theme" , "Dark");

// accessing a value from localStorage
localStorage.getItem("theme");

To see all the stored items for a domain, we can open Developer Tools -> Application and then under Storage we can select localStorage

Session Storage

SessionStorage is same as LocalStorage, but it stores the data only for that current session.

Persistence:
- Data will persist till the session, closing the tab/window or closing the browser will delete the data.
Accessibility
- SessionStorage items can be accessed by the client-side Javascript.
Transmission To Server
- SessionStorage items will not be transferred to the Server via HTTP requests. The user needs to explicitly include these if they want to send.
Usage
- Storing non-sensitive data that should persist for a single session.

Browsers expose an API called sessionStorage to set and access the items. We store the values in key-value pairs.

// setting a value into sessionStorage
const cart = ["1","2","3"];
sessionStorage.setItem("cart" , JSON.stringify('cart'));

// accessing a value from sessionStorage
const storedItems = sessionStorage.getItem("cart");
console.log(JSON.parse(storedItems));

To see all the stored items for a domain, we can open Developer Tools -> Application and then under Storage we can select SessionStorage.

Cookies

Cookies are a storage mechanism that stores information across sessions. The maximum size of the cookies is 4KB. We use cookies to store the information, that needs to be sent to the server on every request.

Persistence:
- Data will persist across sessions, closing the tab/window or closing the browser will not delete the data.
- We can create cookies with an expiration time so that they get deleted after the expiration time.
Accessibility
- Cookie items can be accessed by the client-side Javascript if they are allowed.
- If a cookie is inserted by the server, then the server can restrict the client accessibility using the httpOnly property.
- Cookies that are HTTPOnly can't be accessible by the client.
Transmission To Server
- Cookies will be automatically added to every HTTP request to the Server.
Usage
- Storing the data that needs to be sent to the server.

We can use document.cookie in the Browser to add value to the cookies Storage.

document.cookie = "name = userName";

The above cookie can be accessible in the browser through JavaScript.Let's see how we can make a cookie not accessible on the client side.

We are making an API call to the server, and the server sets a cookie for the authCookie. So this cookie should not be accessible to the client side. we can use the httpOnly option to restrict access.

res.cookie("authCookie", "user123", { httpOnly: true });

When using Browser storage we should be aware of the normal Security Attacks. Let's look at some common attacks where users can get access to the browser data.

XSS (Cross Site Scripting): Injecting scripts on the client side and getting access to the data.
- Both LocalStorage and SessionStorage are accessible via ClientSide. So if an attacker injects a Javascript script, then can get access to the data stored in localStorage and sessionStorage.
- Because of this reason we normally don't store any sensitive information in LocalStorage and SessionStorage.
- Cookies stored in the browser are not accessible to clientSide scripts if we used httpOnly while creating the cookies.
CSRF (Cross-Site Request Forgery): Making a Request to another domain or site, so that they can get access to Cookies stored in the browser.
- As cookies get added to every HTTP request, an attacker can make a request to a different or malicious site and get access to all the cookies.
- We can use the SameSite attribute for cookies, which helps protect against cross-site request forgery (CSRF) and cross-site scripting (XSS) attacks.

For more information refer : Storage API

Hope you liked it, Happy coding! 🎉💻✨

Thank you.

React Refs: key to DOM Manipulation Part-2

Naresh — Tue, 03 Oct 2023 07:22:42 +0000

In Part-1 of the React Refs, we have seen how to get access to the own component DOM elements. Now we will see how to access other component DOM elements using refs.

React provides a function forwardRef, to expose the DOM element to other components or Parent components.

forwardRef As the name suggests, it forwards the ref to child nodes. This is very useful when building re-usable component libraries.

Usage and Syntax:

Let's say we have a component MyInput that renders an input field. This component will take three props label, textVal and onTextChange.

import { ChangeEvent, FC } from "react";

type MyInputProps = {
  label: string;
  textVal: string;
  onTextChange(text: string): void;
};

export const MyInput: FC<MyInputProps> = (props) => {
  const handleTextChange = (event: ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    props.onTextChange(value);
  };

  return (
    <div>
      <label htmlFor="username">{props.label}</label>
      <input
        name="username"
        value={props.textVal}
        onChange={handleTextChange}
      />
    </div>
  );
};

Now we want to expose the input element to its parent. We do this by wrapping our Component in the forwardRef function. This function forwards the parent component ref to its child DOM Nodes.

import { ChangeEvent, forwardRef } from "react";

type MyInputProps = {
  label: string;
  textVal: string;
  onTextChange(text: string): void;
};

export const MyInput = forwardRef<HTMLInputElement, MyInputProps>(
  function MyInput(props, ref) {
    const handleTextChange = (event: ChangeEvent<HTMLInputElement>) => {
      const value = event.target.value;
      props.onTextChange(value);
    };
    return (
      <div>
        <label htmlFor="username">{props.label}</label>
        <input
          ref={ref}
          name="username"
          value={props.textVal}
          onChange={handleTextChange}
        />
      </div>
    );
  }
);

Now, from the parent component we can modify the input DOM node directly. Let's add a button that will focus our input element on click. To do this we need to create a ref in our parent and pass it to the MyInput component. Then we can call focus() method on the ref current element to focus the input.

const myInputRef = createRef<HTMLInputElement>(null);

// calling focus of the input DOM element when the user clicks on focus button
const handleFocusClick = ()={
   if(myInputRef.current){
     myInputRef.current.focus();
   }
}

// passing ref to MyInput component
<MyInput {...otherProps} ref={myInputRef} />

CodeSandbox

We know how to expose a child DOM node to the Parent component. But what if we want to expose only certain functionalities of the DOM node? Yes, we can do this using imperative handling of refs.

Exposing Limited Access to Parent Components

When we set ref to the child DOM node, we are giving access to the entire DOM node. To restrict access we can use the useImperativeHandle hook. This hook takes three parameters

ref: the reference we received from a parent
createHandle: A function that will return the methods or value we want to expose to the parent component.
dependencies: an optional array to specify the values that we used inside the created handle function. Whenever a value changes in this list react will re-run the createHandle function.

Syntax

 useImperativeHandle(ref, ()=>{
  return{focus = myInpRef.focus()};
},[myInpRef])

Let's build a VideoPlayer Component that will expose play and pause functionality to parent component using forwardRef and useImperativeHandle.

Steps

Create a VideoPlayer component with an internal ref variable to the video element.
Use the useImperativeHandle to expose the play, pause functions to the parent component ref.
In the parent Component, invoke the play and pause methods, when the user clicks.

Why do we need an internal ref element in the Video player? We are already getting the ref from the forwardRef?

We need it because, if we assign the ref to the DOM element react will give the entire DOM node access. To restrict that we create a local ref in our component and then assign the local ref functionality to the parent ref using useImperativeHandle.

import { forwardRef, useImperativeHandle, useRef } from "react";

export type VideoPlayerRef = Partial<Pick<HTMLVideoElement, "play" | "pause">>;

export const VideoPlayer = forwardRef<VideoPlayerRef, {}>(function VideoPlayer(
  _props,
  ref
) {
  const videoRef = useRef<HTMLVideoElement>(null);

  useImperativeHandle(
    ref,
    () => {
      // binding videoRef.current as play and pause uses this
      return {
        play: videoRef.current?.play.bind(videoRef.current),
        pause: videoRef.current?.pause.bind(videoRef.current)
      };
    },
    []
  );

  return (
    <video width="400" ref={videoRef}>
      <source
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
        type="video/mp4"
      />
    </video>
  );
});

In the above example, we exposed only the play and pause functionality of the video element to the Parent. With this we can restrict access to DOM elements.

Summary

forwardRef allows exposing the child DOM nodes to the parent component.
useImperativeHandle helps to provide restricted access to the parent component.

References

React Docs
- forwardRef
- useImperativeHandle

React Refs: Key to DOM Manipulation

Naresh — Mon, 02 Oct 2023 17:14:30 +0000

React is a declarative UI library. A declarative? What does that mean? Let's understand the difference between imperative and declarative regarding web applications.

Let's say we wanted to create a page with a button and whenever the user types we should update the value in the Paragraph below the button.

In Imperative UI Programming:

Create a variable to store the value of the count and assign it to 0
Get the button element by id
Get the Paragraph element by id
Create an on-click handler and set it as the button on-click event listener
In on-click handler
1. update the count value by 1
2. update the paragraph element textContent with the updated count.

let count = 0;
const button = document.getElementById('button');
const paragraph = document.getElementById('paragraph');

button.onclick = function() {
  count++;
  paragraph.textContent = `Count is : ${count}`;
};

paragraph.textContent = `Count is : ${count}`;

As we can see, we are kind of instructing step by step and we are accessing the DOM elements and modifying them on our own. This can be tedious in big projects. What if we, forget to update the text content of the paragraph after we update the count?

Declarative UI Programming (Using React ):

Create a state variable named count
Create a handler to update the count
Show the count in the paragraph

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  const handleCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleCount}>Increment</button>
      <p>{`Count is : ${count}`}</p>
    </div>
  );
}

In the above react program, we didn’t modify any of the DOM elements directly. We just used the API Provided by the JSX syntax, and React will take care of DOM manipulations for us.

To Summarize,

In imperative programming, we instruct the computer on how to perform each step of a task. We directly manipulate the DOM elements and update their values. It involves explicit instructions and control flow to achieve the desired outcome.
In declarative programming, we describe what we want to achieve without specifying the step-by-step instructions. We rely on abstractions and let the framework or library handle the implementation details. In the case of React, we define the desired UI structure and let React take care of updating the DOM based on the state changes.

For more info checkout officail React Docs Declarative UI

So, we don’t get access to the DOM elements directly in React. What if we want to access the DOM elements? This is well handled in React, for this we have refs.

What is Ref?

In React, a Ref is a state variable that will persist values between renders. This is a special kind of state variable as it doesn’t trigger re-render when we update.

We can create a Ref using useRef or createRef. We usually use useRef in functional Components and the createRef in class Components. In this blog, we will use useRef .

As we know react is a Declarative UI library, there is no way we can directly modify the DOM. To give access to DOM elements, React accepts a special property named ref on every component.

This property accepts the ref value and assigns the DOM element as the current value of the ref object we passed.

Syntax:

const countRef = useRef(0); // returns {current:0}

useRef accepts an initial value and returns a mutable object with the current property. This current property will hold the value.

When to Use

Storing timer’s Id
Storing DOM elements
Store any value, that is not needed to trigger a re-render.

When Not to Use

NEVER EVER USE Refs inside a component render. This can cause unexpected results.

Ex: let's say we have a ref name countRef and a state with color. When we update the count we will not see the updated value.
But when we change the color value it will show the latest value stored in the ref. So better we don’t use refs in the render.

DOM Manipulation using Refs.

To access the DOM elements created by React, we can use the ref property on the components. If we set this prop, react will assign the DOM element to the current value of the ref.

export const MyComponent = ()=>{
    const inpRef = useRef(null); // creating a ref

    return <input ref={inputRef} /> // passing the ref as an argument, so that react will add the DOM
}

One day, your PO came to you and asked, can we implement scroll-to-top and scroll-to-bottom functionality on the home page. So we can scroll to the top/bottom whenever the user clicks on a button.

To achieve this we will create two buttons in the navigation bar, and when the user clicks on the button we will scroll to the top or bottom. We can do this by invoking the scrollTo function on the element. Let’s see this in action

We will create a ref, that will be used to store the scrollable container DOM element, and we will create two handler functions named

handleScrollToBottom
handleScrollToTop

These two functions will call the scrollTo event on the DOM element. We will pass our container Ref as a parameter to the div element that contains the text.

In the above code, we set the ref property of the div to containerRef. Whenever react sees the ref property, it will assign the DOM element to that ref’s current value.

Now we have access to the DOM element. Whenever the user clicks on those buttons we will directly modify invoke scroll to on the Text Container DOM element.

For more info check out official : React Docs

This is to access the DOM elements in the component, What if we want to access the DOM elements of another Component? We can get access to other components DOM elements using forwardRef.

Let’s Discuss more about forwardRefs and how to expose limited access to DOM elements in the next Post.

Thank you and please provide your feedback.