DEV Community

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

Posted on • Edited on

5

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay