As web developers, it is common to store data in web browsers to improve user experience and performance of the web apps. In most of the cases, we either use LocalStorage or SessionStorage.

In this article, let’s evaluate SessionStorage and LocalStorage considering Web Security and User Experience. We will thendiscuss how to pick the right one for your requirement.

Introduction to SessionStorage and LocalStorage

LocalStorage and SessionStorage are browser storage features introduced in HTML5. It allows saving data in key-value pairs in web browsers via JavaScript. Usually, most of the browsers support up to 5MB browser storage and will enable us to save more data efficiently.

How to use SessionStorage and LocalStorage

You can use the browser window object to access SessionStorage. Have a look at the example below.

sessionStorage = window.sessionStorage

Similarly, you can access LocalStorage from the window object.

localStorage = window.localStorage

The followings are the functions available for both storage types.

//saving an item
  storage.setItem('name', 'Alice')
  storage.setItem('age', '5')

//read an item
  storage.getItem('name') // returns "Alice"
//get storage size
  storage.length // returns 2
//get key by index
  storage.key(0) // returns "name"
//remove an item
  storage.removeItem('name')
//clear storage
  storage.clear()

#security #javascript #sessionstorage #frontend-development #localstorage