How to use SessionStorage and LocalStorage in Javascript

Preface

As a web developer, it is very common to store data in web browsers to improve user experience and boost web application performance. In most cases, LocalStorage and SessionStorage are available for us to use.

In this article, we will evaluate SessionStorage and LocalStorage from the perspectives of security and user experience. We will then discuss how to pick the right object to use based on your requirements.

Introduction to SessionStorage and LocalStorage

Before HTML5, developers generally used Cookies to save some simple information on the client. After the release of HTML5, a new method for saving data locally on the client was provided, that is, Web Storage, which is also divided into: LocalStorage and SessionStorage, which allows data to be saved in the form of key-value pairs in a web browser through JavaScript. Compared with Cookie, it has the following advantages:

• Has larger storage capacity, Cookie is 4k, Web Storage is 5M.
• It is easier to operate data than Cookie.
• It is not sent to the server with every request.

How to use SessionStorage and LocalStorage

You can access SessionStorage and LocalStorage using the browser window object. Take a look at the following example:

sessionStorage = window.sessionStorage
localStorage = window.localStorage

The following are the features available for both storage types.

//Store an item
  storage.setItem('name', 'Alice')
  storage.setItem('age', '5')
//Read an item
  storage.getItem('name') // returns "Alice"
//get storage object length storage.length // returns 2
//Get the corresponding key name through the index storage.key(0) // returns "name"
//Remove an item
  storage.removeItem('name')
//Clear the storage object storage.clear()

Difference between LocalStorage and SessionStorage

The main difference between LocalStorage and SessionStorage is the different ways data is shared between browser windows and tabs.

LocalStorage can be shared across browser windows and tabs. That is, if you have an application open in multiple tabs and windows, and once LocalStorage is updated in one of the tabs or windows, the updated LocalStorage data will be seen in all other tabs and windows.

However, SessionStorage data is independent of other tabs and windows. If two tabs are open at the same time and one of them updates the SessionStorage, it will not be reflected in the other tabs and windows. Let’s take an example: suppose a user wants to book two hotel rooms via two browser tabs. Since this is individual session data, using SessionStorage is ideal for a hotel booking application.

Safety Notes

The storage objects of Web Storage are independent of the domain name, which means that Web applications under different sites have their own independent storage objects and cannot access each other. In this respect, SessionStorage and LocalStorage are the same.

For example, a Web application deployed on abc.com cannot access the Web Storage objects of xyz.com.

The same is true for subdomains. Although www.grapecity.com.cn and gcdn.grapecity.com.cn belong to the same main domain of grapecity.com.cn, they cannot access each other's storage objects.

In addition, not only are the subdomains independent of each other, but they are also different for the http and https protocols, so this also needs attention.

Dealing with Cross-Site Scripting (XSS) Attacks

First of all, what is an XSS attack?

XSS is a malicious script added to a web page, which is loaded and executed by the browser to attack and obtain private information.

Both LocalStorage and SessionStorage are vulnerable to XSS attacks at this point. An attacker can directly add malicious scripts to storage objects and execute them. Therefore, it is not recommended to store sensitive personal information in Web Storage, for example:

• Username and Password
• Credit card information
• JsonWeb Token
• API Key
• SessionID

How to avoid attacks?

• Try not to deploy multiple web applications using the same domain name. If this is the case, try to use subdomains to deploy applications, because once multiple applications use the same domain name, all users will share the web storage objects.
• Once data is stored in LocalStorage, the developer does not have any control over it until the user clears it. If you want data to be automatically deleted after the session ends, use SessionStorage.
• All data read from WebStorage must be validated, encoded, and escaped.
• Encrypt data before saving it into WebStorage.

Improvement of user experience

Although some sensitive data should be avoided, we can still improve the user experience of web applications through WebStorage

For example, a user is filling out a form, but for some reason the user closes the tab/window. However, the form LocalStorage implements the function of automatically saving the user form, so that when the user opens it again, the information previously filled out by the user will be automatically restored.

<!DOCTYPE html>
<html>
<body>
<h2>Form Example</h2>
<form>
  <label for="lname">Last Name:</label><br>
  <input type="text" id="lname" name="lname" value="" onchange="save(this)">
  <label for="fname">Name:</label><br>
  <input type="text" id="fname" name="fname" value="getValue(this)" onchange="save(this)"><br>
</form>
<script>
  localStorage = window.localStorage
  function save(input) {
    localStorage.setItem(input.id, input.value)
  }
document.getElementById("fname").value=localStorage.getItem("fname")
 document.getElementById("lname").value=localStorage.getItem("lname")
</script>
</body>
</html>

Because our scenario is to automatically restore the previously filled content when the user opens it again, we cannot use SessionStorage as the storage object here because it will be automatically cleared when the window is closed.

Using Storage Objects for Browser Caching

Generally speaking, we can cache some application data for later use by Web applications. For example, if your web application needs to load currency data for all countries, without using WebStorage, you need to issue an HTTP request every time you load and obtain the list. After saving the data in LocalStorage, you can directly obtain the data.

Since LocalStorage does not expire, users can use the content in the storage object any time they open the page. If users want to delete LocalStorage data, it is also very simple. Just clear the browser cache content.

Listening for LocalStorage changes

LocalStorage is an object that can be used as local persistent storage. We can add data storage to it. Similarly, when it changes under user operations, we also need to be able to monitor it. When it changes, it will trigger a storage event. We can monitor this event on the window to complete some logical operations.

window.addEventListener('storage', () => {
  ...
});
 
window.onstorage = () => {
  ...
};

Summary and Conclusion

You can choose LocalStorage vs SessionStorage based on your use case. If your application needs to share data across multiple browser windows and tabs, use LocalStorage, otherwise use SessionStorage.

Both SessionStorage and LocalStorage are vulnerable to XSS attacks. Therefore, avoid storing sensitive data in browser storage.

Finally, although WebStorage is very useful, it is recommended that you use it in the following situations:

• No sensitive data
• Data size is less than 5MB
• High performance is not important

The above is the details of how Javascript uses SessionStorage and LocalStorage. For more information about Javascript, please pay attention to other related articles on 123WORDPRESS.COM!