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.
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.
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.
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:
Top comments (0)