What is localStorage?
localStorage, also known as DOM storage, is web storage used to store client-side data. A window property that can store data. There is no expiration date. Save the key-value data to your web browser.
//Set localStorage.setItem('total_cost', '2306') //Retrieve const total_cost = localStorage.getItem('total_cost') //Delete localStorage.removeItem('total_cost') //Delete All localStorage.clear()
What is SessionStorage?
localStorage is web storage similar to localStorage. The difference between localStorage and sessionStorage is that localStorage never expires, sessionStorage expires and is deleted when the site session ends. This storage is also one of the alternatives to web cookies.
//Save Data sessionStorage.setItem('total_cost', '2306'); //Retrieve const total_cost = sessionStorage.getItem('total_cost') //Delete sessionStorage.removeItem('total_cost') //Delete All sessionStorage.clear()
What are Web/HTTP Cookies?
HTTP cookies/web cookies also belong to web storage used to store small blocks of data. Cookies are commonly used to store login details and site access. This can also be used to store data for later use.
//Save Data document.cookie = "email@example.com"; //Retrieve Data let cookie_data = document.cookie
This Multi-Storage – Student Details form stores data in the Multi-Storage type specified above. This allows users to save basic student information in their browser. The application displays all data in the right pane or side. Users can update student details or delete them.
- Student Detail Form
- Add New Student
- Display All Student Details
- Edit Student Details
- Delete Student Details
How to Run?
- Download the provided zip file. (download button is located below this article)
- Download and Install local web servers such as XAMPP/WAMP
- If using XAMPP/WAMP, open the XAMPP/WAMP’s Control Panel and start the Apache Server.
- Extract the source code zip file.
- Copy the source code folder. If you using XAMPP, paste the folder inside the XAMPP’s htdocs folder. If you are using WAMPP, psete it inside the www directory.
- Browse the Simple Student Details Form Application in your preferred browser such as Chrome. i.e.
that’s it! Now you can test the page’s source code and make changes to the code to familiarize yourself with the process and understand how it works. I hope this simple source code will help you in your search and help you in your future web application projects. Visit this website for more tutorials and free source code.
A motivating discussion is definitely worth comment. Theres no doubt that that you ought to publish more about this subject matter, it might not be a taboo subject but generally people dont talk about these subjects. To the next! All the best!!