DEV Community

BekmuhammadDev
BekmuhammadDev

Posted on

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.

Top comments (0)