Use localStorage to store data on your users browser indefinitely

I was looking for a way to store users’ session/progress data without relying on URL params and custom states, initially, I was just gonna store that data in the database, but then I found localStorage. Basically, you can store up to 5MB of key-value pairs on your user’s browsers, and the data lives on even upon page reload/redirect.

Using the toolbox plugin, you can save data to the users localStorage via the following script:
localStorage.setItem("key","value");

And then access it using the JavaScriptToBubble Element that comes with toolbox + an HTML element:

setTimeout(function() {
bubble_fn_a(localStorage.getItem(“Color”));
},1000);

Here is my full writeup with step-by-step instructions:

Let me know if you get stuck behind a paywall and il just copy and paste the whole thing in here.

Bek

8 Likes

Great article.

Is anyone here familiar with yep.so (built on bubble)? I just bought the NoCodeLife Course but not sure how to allow users to edit on screen and see their page in real time.

Pretty sure it is as simple as setting up the text as Inputs. Why wouldn’t I want to use a custom state?

Thank you for the useful article :raised_hands: