DEV Community

BekmuhammadDev
BekmuhammadDev

Posted on

1 1 1 1 1

Javascript Ls/ss/cookies

Browser Memory:

Image description

  • localStorage
  • Session Storage
  • Cookies

Method

SetItem();
GetItem();
RemoveItem();
Clear();

Local Storage
localStorage for long-term storage of data in the browser. 5-10 MB of memory is allocated for each origin domain by taking number.localStorage even after the cached data browser is closed. This amount may vary slightly depending on the browser and device.

Data storage(SetItem):

localStorage.setItem('key', 'value');

Enter fullscreen mode Exit fullscreen mode

cancole:

Image description

Get information(GetItem):

let value = localStorage.getItem('key');
cansole.log(value)
Enter fullscreen mode Exit fullscreen mode

cansole:

Image description

Delete data(removeItem):

localStorage.removeItem('key');

Enter fullscreen mode Exit fullscreen mode

Delete all data(Clear):

localStorage.clear();

Enter fullscreen mode Exit fullscreen mode

Session Storage
sessionStorage is also used to store data in the user's browser, but this data is only stored for the duration of the session. That is, the data is deleted when the browser window is closed. sessionStorage is also usually allocated 5-10 MB of memory for each originating domain. This amount may also vary by browser and device. sessionStorage only stores data for the duration of the session, and when the session ends (when the browser window is closed), the data is deleted.

Data storage:

sessionStorage.setItem('key', 'value');

Enter fullscreen mode Exit fullscreen mode

Get information(GetItem):

let value = sessionStorage.getItem('key');

Enter fullscreen mode Exit fullscreen mode

Delete data(removeItem):

sessionStorage.removeItem('key');

Enter fullscreen mode Exit fullscreen mode

Delete all data(Clear):

sessionStorage.clear();

Enter fullscreen mode Exit fullscreen mode

Cookies
Cookies are small pieces of information that are stored in the browser and can be read by websites. Cookies can be set with a specific term and can be deleted when the browser is closed or at a specific time interval.

Data storage:

document.cookie = "key=value; path=/; max-age=3600"; //it is kept for 1 hour

Enter fullscreen mode Exit fullscreen mode

Get information

function getCookie(key) {
  let name = key + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

Enter fullscreen mode Exit fullscreen mode

Delete data

document.cookie = "key=; path=/; max-age=0";

Enter fullscreen mode Exit fullscreen mode

Image description

Memory size may vary slightly by browser and platform. An overview of the localStorage and sessionStorage sizes of some popular browsers:

  • Google Chrome: About 10 MB.
  • Mozilla Firefox: About 10 MB.
  • Microsoft Edge: About 10 MB.
  • Safari: About 5 MB.
  • Opera: About 10 MB.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

nextjs tutorial video

📺 Youtube Tutorial Series

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay