Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Storing input from different frontend webpages of a multi page contact form
I consider to create a multi page contact form in which there is one backend page but about 5 front-end pages (stage 1-5). Pages 1-4 are input pages and page 5 is for a submit button and a success message.
I understand that I can save the data of each stage (before the form submit in stage 5) in either of the following:
- Cookie
- LocalStorage
- SessionStorage
How should I determine which of these Web browser data storages would best fit my need?
1 answer
Cookies vs Local Storage vs Session Storage.
Cookies
- Has different expiration dates (both the server or client can setup expiration date).
- Cookies themselves can specify which pages from which domains can access them, or restrict access to pages having the same secure origin.
- Client-side Javascript can be denied access to a cookie value by the cookie's
HttpOnlyattribute, even if the domain/path-based access policy would otherwise have allowed it. - Data are transferred on each HTTP request.
- The max size for Cookies are 4KB.
More about Cookies.
Use document.cookie to create Cookies in JavaScript.
Local Storage
- Has no expiration date.
- Part of the browser-side "Web Storage". A web server is not involved in the function of the "Web Storage" mechanism.
- Access to data stored in "Web Storage" is strictly on a "same origin" basis. Only pages loaded from URLs that share the same origin (scheme, host and port) have access to the same data.
- Data are not transferred on each HTTP request.
- The max size for Local Storage is 5MB.
Use window.localStorage to access the Storage.
Session Storage
- Data is gone when you close the browser tab.
- Part of the browser-side "Web Storage". A web server is not involved in the function of the "Web storage" mechanism.
- Access to data stored in "Web Storage" is strictly on a "same origin" basis. Only pages loaded from URLs that share the same origin (scheme, host and port) have access to the same data.
- Data are not transferred on each HTTP request
- The max size for Session Storage is 5 to 10 MB.
Use window.sessionStorage to access the session Storage.
This were some facts about Cookies & Local Storage & Session Storage. You can now choose which will fit your cause but likely it will be Local Storage but it is also your opinion.
2 comment threads