Opens an external site in a new window
Pray for peace.
RODNEY LAB
  • Home
  • Blog
  • Projects
  • Giving
  • Contact

SvelteKit Session Storage: Cache Form Data # SvelteKit Session Storage: Cache Form Data #

SvelteKit Session Storage
  1. Rodney Lab Home
  2. Rodney Lab Blog Posts
  3. SvelteKit Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

SvelteKit Session Storage: Cache Form Data #

Published: 7 months ago
4 minute read Gunning Fog Index: 5.2 2 comments
Content by Rodney
Author Image: Rodney from Rodney Lab
SHARE:

🖥 SvelteKit Session Storage: Cache Form Data #

Here we look at how you can use Session Storage in SvelteKit to cache form data temporarily. You might use this code on a form or on a page where a user can potentially enter a long piece of text. User's often run JavaScript blockers like NoScript to protect their privacy. A downside is when your site needs to run third party JavaScript in the process of submitting a form, the user might end up having to refresh their browser and lose the details they just entered. This happens because once the user enables the necessary JavaScript to load on the page, the plugin refreshes the window (so the previously blocked JavaScript actually loads). This can provide a frustrating user experience.

In this video we see how you can use SvelteKit Session Storage to repopulate the form fields if the browser refreshes. We also see how to bind a form field to a JavaScript variable and finally how to clear data stored in Session Storage. If you think there's something in there for you to learn, then let's crank up the video and see how it all works!

📹 SvelteKit Session Storage: Video #

SvelteKit Session Storage

🗳 Poll #

How familiar are you with binding form values and event dispatching in SvelteKit?
Voting reveals latest results.

🖥 SvelteKit Session Storage: Code #

src/routes/index.svelte
svelte
		
1 <script>
2 import { browser } from '$app/env';
3 import { validEmail } from '$lib/utilities/form';
4 import { EmailInputField, TextArea, TextInputField } from '@rodneylab/sveltekit-components';
5 import '@fontsource/source-sans-pro';
6
7 let name = browser ? window.sessionStorage.getItem('name') ?? '' : '';
8 let email = browser ? window.sessionStorage.getItem('email') ?? '' : '';
9 let message = browser ? window.sessionStorage.getItem('message') ?? '' : '';
10
11 function sessionStore(field, value) {
12 if (browser) {
13 window.sessionStorage.setItem(field, value);
14 }
15 }
16
17 function clearForm() {
18 if (browser) {
19 sessionStorage.removeItem('name');
20 sessionStorage.removeItem('email');
21 sessionStorage.removeItem('message');
22 }
23 name = '';
24 email = '';
25 message = '';
26 }
27
28 function validateInputs() {
29 errors = { ...errors, ...validEmail(email) };
30 }
31
32 function handleSubmit() {
33 validateInputs();
34 console.log({ name, email, message });
35 clearForm();
36 }
37 </script>
38
39 <main class="container">
40 <div class="content">
41 <h1>Write a message</h1>
42 <form class="form" on:submit|preventDefault={handleSubmit}>
43 <TextInputField
44 value={name}
45 id="contact-name"
46 placeholder="Blake Costa"
47 title="Name"
48 on:update={(event) => {
49 sessionStore('name', event.detail);
50 name = event.detail;
51 }}
52 style="padding-bottom:1.25rem;margin-right:1rem"
53 />
54 <EmailInputField
55 value={email}
56 id="contact-email"
57 placeholder="[email protected]"
58 title="Email"
59 on:update={(event) => {
60 sessionStore('email', event.detail);
61 email = event.detail;
62 }}
63 style="padding-bottom:1.25rem;margin-right:1rem"
64 />
65 <TextArea
66 value={message}
67 id="contact-message"
68 placeholder="Enter your message here"
69 title="Message"
70 on:update={(event) => {
71 sessionStore('message', event.detail);
72 message = event.detail;
73 }}
74 style="padding-bottom:1.25rem;margin-right:1rem"
75 />
76 <div class="button-container">
77 <button type="submit">Send your message</button>
78 </div>
79 </form>
80 </div>
81 </main>
82
83 <style>
84 :global(html) {
85 font-family: 'Source Sans Pro';
86 background-color: #007fff;
87 color: #fcfcff;
88 accent-color: #291720;
89 }
90
91 :global(h1) {
92 font-size: 1.953rem;
93 }
94
95 :global(input),
96 :global(textarea) {
97 border-style: none;
98 background: #fcfcff;
99 border-radius: 2px;
100 line-height: 1.75;
101 padding: 0 0.5rem;
102 font-size: 1.25rem;
103 }
104
105 form {
106 margin-top: 1.5rem;
107 }
108 .button-container {
109 display: flex;
110 width: 100%;
111 }
112
113 button {
114 cursor: pointer;
115 color: #ffd791;
116 background-color: #291720;
117 border-style: none;
118 border-radius: 1.5rem;
119 font-size: 1.563rem;
120 padding: 0.5rem 1.5rem;
121 margin-top: 1.5rem;
122 margin-left: auto;
123 }
124 @media (prefers-reduced-motion: no-preference) {
125 button {
126 transition: background-color 250ms, color 250ms;
127 }
128 }
129 @media (prefers-reduced-motion: no-preference) {
130 button {
131 transition: background-color 2000ms, color 2000ms;
132 }
133 }
134
135 button:hover {
136 background-color: #686963;
137 color: #fcfcff;
138 }
139
140 .container {
141 display: flex;
142 flex-direction: column;
143 }
144
145 .content {
146 width: 60%;
147 margin: 3rem auto;
148 }
149 </style>

🔗 SvelteKit Session Storage: Links #

  • Using Local storage with SvelteKit,
  • Open full demo code repo on Github ,
  • NoScript Security Suite Firefox extension  ,
  • Svelte input field binding tutorial ,
  • Svelte component binding and event dispatcher tutorial ,
  • MDN Session Storage docs .

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

Rodney from Rodney Lab
TAGS:
SVELTEKIT

Related Posts

Using vanilla-extract with SvelteKit: Styles with TypeScript

Using vanilla-extract with SvelteKit: Styles with TypeScript

sveltekit
typescript
css
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Comments

  • Alain BUFERNE

    Good topic and explaination but for the video: speak too fast and more is music, music is ok when there is nobody talking but why adding disturbing sound to a technical teaching speech... I don't understand

    5 months ago
    • Rodney verified

      Hi Alain, thanks for taking the time to leave a comment and sharing your feedback. I do agree the music is a little too loud on this video and also at the start I do speak quite quickly. I do hope despite this you are still able to learn something. I have very limited time to create this free content, but will rerecord this video when I am able to find the time. Bearing that in mind, do let me know if there is some extra detail it might be helpful to include in the new edition. Kindest regards, Rodney.

      5 months ago

      Copyright © 2020–2022 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

      • Home
      • Contact
      • Terms of Use
      • Privacy Policy
      We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.