Local storage in a condition

All values stored in localStorage are strings (text in Bubble parlance) stored as key/value pairs.

All of the various Bubble plugins that provide interfaces to localStorage that I have looked at basically expect you to only store strings to localStorage and don’t seem to do the stringification for you and so don’t support different data types in the Bubble sense. And they are often deficient in other ways, which is why I recently introduced my own solution with a plugin called Floppy. Quite simply, Floppy is vastly superior to any other browser storage solution for Bubble.

To solve your problem yourself you’ll need to look at what’s in your app’s localStorage when whatever plugin (or code you yourself are using) writes a value that you think is “empty”.

In my intro video for Floppy, I talk about localStorage (and sessionStorage) in general, explain the simple browser interface to it and show how the .setItem() and .getItem() methods work.

Now, this is not explained in the video I post above, but if some key does not exist, .getItem(‘some_key’) will return null for that key (null is a special JavaScript object that represents emptiness – the value is not undefined, but there’s no particular value store there yet). In Bubble, the concept of ‘empty’ or ‘is empty’ is basically the same and in fact you can basically think of empty and null as the same thing.

However, this doesn’t mean that what whatever plugin you are using will store or return for an ‘empty’ value. It’s possible it might store what we call “the null string” – which is the string value ''or "" (a string that has 0 characters in it) or it might store the string value 'null' (that is, a string composed of the letters null).

The latter would happen, for example, if the storage plugin takes “any” sort of value and does the writing like this:

localStorage.setItem('some key', JSON.stringify(some_value))

The value we would find under some key in localStorage will be the string 'null' if some_value was null (e.g., if you passed the plugin an empty and it allows you to do this).

Similarly, when reading the value back, it depends how the plugin does that. Does it just read the string value back and publish it to some exposed state? Like this:

localStorage.getItem('some key')

or does it parse the value first? Like this (or similar):

JSON.parse(localStorage.getItem('some key'))

If it did that and published the result to an exposed state, instead of finding the string ‘null’ at the exposed state, we would find an actual empty (an actual null value).

Again, all of the other plugins I’ve seen for browser storage are rather simplistic and don’t give much thought to how actual Bubblers might actually use them. (In the case of Floppy, what I do is let you store actual Bubble values into localStorage, by which I mean we serialize them to strings and then parse them back in (when reading) and publish them back to Bubble not just as strings, but as the actual value in the actual data type that you would expect).

Edit: In Floppy, there are also cases where I simply remove the key rather than storing an “empty” value there. For example, if you try to write a scalar key with an empty value, I just don’t store a value to the key. If the key exists, I actually remove it. Similarly, for list-type keys, if the length of the list becomes zero (or you try to write an empty value), that key is removed if it previously existed. The reason for this is that the result of .getItem() would be the same in either case, so wy not just clean up the key.

It does a lot of other stuff too. But whether you’re interested in my commercial plugin or not, the video above will likely be helpful to you in understanding browser storage better and understanding how to look at your app’s localStorage and understand what’s going on with whatever solution you are using at the moment.

2 Likes