Forum Academy Marketplace Showcase Pricing Features

[New FREE plugin] Session & Local Storage (web storage API)

Hola nocoders!

We made a new DOM storage plugin, completely free to use :slight_smile:

Happy building!!

Some info:

Instructions
Web storage or DOM storage, provides web applications with methods for storing client-side data. Web storage supports persistent data storage, similar to cookies but with a greatly enhanced capacity and no information stored in the HTTP request header.

This plugin makes it easy to integrate and use Web storage in your Workflows. To use the Web storage, simply drag the Web Storage element to your page to make the Web Storage API element actions available to your workflow.

The plugin will set, store and delete Web storage, and assign the data to your state to be accessible in your application.

Available actions in workflow (Click here to add an action… > Element Actions):

  • Do Add a Web Storage
  • Do Get a Web Storage
  • Do Delete a Web Storage
  • Do Clear a Web Storage

Best,
Ben

PS. We are also working on implemented the ReCharts library (https://recharts.org/en-US/)

If there is any particular part of that library you want or need, please let me know in the comments :slight_smile: Cheers

10 Likes

Awesome, sounds great! One question though, what types of data could this support, like what would be the use cases for this?

Thanks

1 Like

This is a cool idea. It could be use to speed up websites. One thing though; I can see in your screenshot that you are storing current user in the local storage which make all of its data available and unencrypted to any third party script or service workers. This is a HUGE security risk. Perhaps you could use the current user’s ID as a key to encrypt stored data or at least put some strong warning about data’s vulnerability?
Since Bubble’s made for the non coders, my guess is that most of them don’t know how insecure local and session storage are…

3 Likes

Ya this is interesting. I would be interested to hear some use cases as well.

One thing that I can think of, would be to locally store a list items, that would previously been required to fetch from the database. Apparently this type of storage can keep up to 5MB of info.

Its tough to think of a use case in a bubble context. I could see this being used to store page styling etc in a non-bubble context; however with bubble being so visual it seems much more native to just hide and show groups based on a ‘custom state’

1 Like

An abandoned shopping cart. That’s another one.

A user could come back a week later, only to find… all items… still! in their shopping cart…

1 Like

Local & Session storage should not be used to store any sensitive data, because it is an unsafe method. Even if the data is encrypted, it is easily decrypted if the encryption key is stored in the client. That is why we did not include encryption, which of course may also tend to not lure non-coders into storing sensitive data on the client believing it is safe because the data is encrypted. We could of course clarify this a bit in the plugin description.

Thanks!

1 Like

What about speed with your plugin, getting data locally stored is faster than bubble database?
Have you make some benchmarks or something.

Hey @Benji awesome plugin,
I have one question, I have successfully able to use it with some text data, it works perfect, but when trying in a image kind of data, when using “Do Get a Web Storage” do not retrieve anything.

Any idea here?

Thanks.

Carlos
flual.com

Cann you confirm if it stores complex data structures?

or images? array? array of images?

I think this is amazing? Are you able to confirm for me if this would be I could use case for my situation.

Sometimes I need some users to answer a list of questions (Check list) but sometimes uses are not within reach of a internet connection, but they still need to take a checklist.

Could this plugin be utilised to store the checklist information and then sync it once connected back to the internet?

Any information would be much appreciated.

Kindest regards.

We have not used any benchmarks, but local storage is most likely more efficient than retrieving data from any server-side database. I believe there are several benchmarks and testings available online comparing Web Storage to other storage alternatives. However, the use cases are different for Web Storage as it should not be used for persistence.

/ @Benji & the Avalan Labs Team

1 Like

Great example. We haven’t had time to create a demo yet, but if you have ideas that you want to build and share, we would be greatful!

/ @Benji & the Avalan Labs Team

You should probably look into service workers for this kind of problem

/ @Benji & the Avalan Labs Team

Local storage can only save text or objects made into text format. Images can’t be saved to local storage unless transformer and saved as base64. We could look into saving the image as base64 and then add a method for retrieving it.

/ @Benji & the Avalan Labs Team

1 Like

That would be awesome.

question,
Are the lists saved as text too?
Can I save lists and get that info into a RG?
Regards,

Hi @Benji. Great plugin. I have a use case similar to @timgarrett111. Do we need to use Service Workers to create the logic need for the sync - i.e. to trap when the user is not online - and then use your plugin to store the data locally. Then again using Service Workers to see that the user is online and upload the local data to the Bubble DB?

Best, Peter

1 Like

Yes, I guess that is plausible, however, I wouldn’t use Service Workers only for checking if a user is online as I imagine there are easier ways of doing that. So the answer is no, Service Workers would not be needed for such a logic.

However, there is a limit to how much you could store in local storage (5 MB), and it is also not the safest way of storing data offline. The local storage could suddenly be cleared for instance if a computer requires disc space.

But sure, Local Storage could be used for storing data offline as long as the rest of the page is cached and able to work without internet connection.

/ @Benji & the Avalan Labs Team

I installed the plugin, but I don’t get the action in my workflow. Any idea what would cause that?

Screenshot 2020-08-07 at 1.23.14 AM

Thanks for a thought through response. Is there any way to make sure the browser caches the web page, or is that as for the 5 MB of data not controllable?