New Plugin: Browser Storage, Session, Local & Cookie Storage - Offline Storage

[jarrad]

Store/get/delete session, local and cookie storage. The plugin allows you to create expiries so you know when to remove or update a key/value pair, Session and local storage also comes with the option to use AES encryption using dynamic secret keys. Session storage will survive site refreshes and will stay in storage until the browser is closed. Local storage will survive until the browser is cleared manually by the user.

I will make up a demo app but you can add a session item here to try it: https://plugbubble.bubbleapps.io/browser

[JohnMark]

Working on iOS and Android too? I’m not sure getting the demo idea. How can I see the value, and see disappear after having setting the date hour?

[t_bubble]

Jarrad - not sure i understood the demo.

We enter key and value, set an expiry date - and click on store.

How can we see the values stored. I refresh and the inputs are gone.

[jarrad]

I can confirm it works on everything i have tested on across PC and Android. There is no reason that this would not work with apple. However I have made triggers so even if a user blocks storage or the browser for what ever reason isnt working a trigger in bubble will let you know.

Here is the browser’s developer console viewing the storage live against the element.

[jarrad]

Its storing in the users browser. so you need to look at the browsers storage area. I didnt want to use the get action to just return the values to the page or people would think im even more nuts and skip the actual uses this provides. lol

[JohnMark]

How can we recuperated the value to put it back in Bubble app?

[jarrad]

Here we are about to sent to the browser this time with encryption enabled.

The browser receives it…

Then this action brabs the data from the browser,

so we can do something like,

you have local and session storage covered there, here is much the same for cookies,

and reading a cookie,

and lets not forget,

and,

Imagine now having a redirect at domain level, so that if bubble is down it goes to a modified manual page that reflects a task(s) that a user could continue on with based an you grabbing and updating the values on next connection…

[jarrad]

or better yet, fast needed data could reside here to control what needs data fast.

[JohnMark]

Great!
update @jarrad Can we use the plugin to log off from our app after ie 15 min of none used?

[jarrad]

in the sense of running every X seconds the say a get the expiry & if expiry > 15mins from last action that caused an expiry update then sure… this isnt like an API call or back end data, its much smoother and without being nearly as prone to delays… remember, the code code is running in the browser, the data will be stored in the browser and for the most part any verify action would only require a small part of the data as in the date for instance.

[JohnMark]

Yes I understand better. Thanks. Can be use for multitude purposes.

[jarrad]

even analytical data based on trends that can assume family’s based on same browser different login or even match time a users desktop browser key is seen as there mobile browser key… we eat when we are hungry kind of marketing… and programmatically sensing hungry is gold.

[jarrad]

and once again, thank you very much you good to go. any question you know where I am. Cheers.

[jamesonvparker]

Hi @jarrad , Would this be a solution to allowing an android app store my data locally? For example, I have a bubble app that’s basically a contact directory and I’ll be wrapping it in an android apk. I can’t connect without internet though and I’m hoping that this will allow my users to access the app’s data when offline. Thanks in advance!

[jarrad]

Hi @jamesonvparker, Short answer is yes. You do not need to include any extra permissions (except the obvious <uses-permission android:name="android.permission.INTERNET" />) in your manifest file and the good thing (for us) is even if the user clears your apps cache the local storage will live because its actually stored in the webview cache. I want to mention thought that there is actually a backup/local storage on device feature set on the android OS that can web leveraged through webview if your writing your own wrapper but in your case specifically you could have your data push/sync to the default contacts as the backup but also as a feature point. I have seen a lot of posts based around android wrappers on the forum and ive been meaning to put my 2cents worth down as far as a few tips that can help out, here are a couple of java methods worth knowing should you be building your own wrapper.

• .setJavaScriptEnabled(true);
• .setAppCacheEnabled(true);
• .setAllowFileAccessFromFileURLs(true);
• .setAllowFileAccess(true);
• .setAppCacheEnabled(true);
• .setBuiltInZoomControls(false);
• .setSupportZoom(false);
• .canGoBackOrForward(0); - mainly for single page apps, it will stop even the return arrow key from leaving the app.

One thing that should be done is telling your webview container that it is only to use your domain or it will return to your domain,

yourWebViewsID = (WebView) findViewById(R.id.webview);
yourWebViewsID.setWebViewClient(new WebViewClient() {
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(url.contains("yourapp.bubbleapps.io")) {
      view.loadUrl(url);
    }
    return true;
  }
});

and also, if the user has the internet disabled, flight mode, no reception, bubble goes down and so on, its wise to include a method of returning the users view to a local stored html file (especially in your use case as its what will happen when the user is offline),

yourWebViewsID.setWebViewClient(new WebViewClient() {
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        yourWebViewsID.loadUrl("file:///android_asset/yourOwnHTMLFile.html");
    }
});

there really are no limits here when you go down the I’m doing it myself road, but my highest recommendation is to include firebase, see HERE.

[jamesonvparker]

Thanks @jarrad that was an extremely helpful response. I will take the time to look into all of that. I followed a bubble tutorial on building an android apk and iphone app as a webview wrapper and it helped me create my first mobile app by mainly copying, pasting, and editing a bunch of code into android studio. I noticed that it would only work online though and this whole discussion seemed to be just what I needed as a solution. I look forward to trying this out and I’ll post my results back here. I’ll try to be detailed to help anyone new to it figure it out as well.

[ernie]

Is it okay to set “current date/time” for expiry date in localStorage since it never really expires?

[jarrad]

Yes this is perfectly fine. The reason it never really expires is so that the plugin isn’t forced to decide when to constantly check/test for the expiry - leaving the control with the user in case your expiry needs to be monitored in seconds or years.

[ernie]

I see - sounds great! Thanks lot

[arnold.smyth]

Is it possible to store the results of an API call in local storage? I get a list of…books back: “Title, Author, Date Published”. I would like to store them so that I can then use them in a repeating group. This doesn’t seem to be possible at the moment.