DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to retain form values after reloading your browser
Jack Kim
Jack Kim

Posted on • Updated on

How to retain form values after reloading your browser

I was working on my phase 3 project for Flatiron School where I had to build a <form> element on the front-end side. As you already know, form usually contains <input> elements with value attribute.

One thing I realized as I was testing on submitting my <form>, my form values would not be retained when the browser reloads.

Maybe it is trivial if the form has very few <input> but what if you need to build a form that creates a person's profile by using their information such as past employment history or a personal background information where it requires to have at least 100-200 words? I assume in that case most of users do not want to re-type over again.

Regardless of how many inputs a form should have, a form retaining its value(s) under unexpected circumstances is more ideal than not able to retain its value(s) in my opinion.

To prevent this incident, I spent some times searching for a solution to the problem and as always.. MDN Web Docs already had the answer.

A short scrollbar length article about sessionStorage.


A page session lasts as long as the tab or the browser is open, and survives over page reloads and restores.

According to the article, one of the sessionStorage features does exactly what I was looking for. I tested it on my Developer Tools.

setting a sample value in the browser tab sessionStorage

sessionStorage.setItem("thisIsKeyName", "this is value stored in sessionStorage") takes two arguments. First argument is the key name for your value, second argument is the value you want to store in the sessionStorage.


The value is stored in the browser tab sessionStorage Go to Developer Tools, click on Application tab and on the left side, you can check your stored value in the Session Storage (a keyName and value...it's an object!)

To obtain your session stored value, simply assign it to a variable.

getting your stored value

Whatever the value may be, once it is in the sessionStorage, your browser will not lose it, also you can use the value later on just like you get it out from your "storage" when you need it.


Resources:

  1. Cover image: https://depositphotos.com/stock-photos/storage.html

  2. MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.