Dismissible Banners, Cookies, and Bricks

How To
1

I’m creating a dismissible banner in bricks, and so far, so good. I have the dismissible part working.
I’m also creating an interaction condition that prevents the banner from showing if a browser storage value is present. And that is working as well. I guess that’s basically setting a cookie, I suppose.

I have the following questions:

  1. What is the difference between window, local, and session storage?
  2. Is it better to add the value I’m adding to storage to one of these options over another?
  3. Is there a way within bricks to add an expiration to this bit of storage?
1 Like
2

I asked this on the FB group and a member suggested asking chatGPT… and so I did and it gave me a helpful answer:

  1. Window, local, and session storage are all ways to store data in the browser, but they have different scopes and lifetimes:
  • Window storage: This is the oldest and least used of the three. It’s a global object that represents the current browsing context, and data stored in it persists until the window or tab is closed.
  • Local storage: This is a newer API that allows you to store data in a key-value store that’s local to the domain. Data stored in local storage persists even after the browser is closed, but is limited to a specific domain.
  • Session storage: This is similar to local storage, but the data is only persisted for the current session. When the user closes the tab or window, the data is lost.
  1. Which storage option to use depends on the requirements of your application. If you need data to persist across sessions, local storage is the best option. If you only need data for the current session, session storage is a good choice. If you only need data for a single window or tab, or for a short period of time, window storage may be sufficient.
  2. Unfortunately, Bricks does not provide a built-in way to set an expiration for data stored in browser storage. However, you can use JavaScript to set a value with an expiration time. You can use the localStorage.setItem(key, value) method to set the value, and the setTimeout() function to set the expiration time. Here’s an example:

javascriptCopy code

// Set the value with a key of "myKey" and a value of "myValue"
localStorage.setItem("myKey", "myValue");

// Set an expiration time of 1 hour (in milliseconds)
setTimeout(function() {
    localStorage.removeItem("myKey");
}, 3600000);

This will remove the item with key “myKey” from local storage after one hour. You can adjust the timeout value to set the expiration time to your desired length of time.

I tested the answer provided after. I was using session storage and sure enough the data was go away after closing the tab and reloading the page into a new tab. Using local storage, the data persists even after closing the tab. So I need to use local data for my use case. I’ll be creating a brief tutorial on this.

5 Likes
3

Do you have a tutorial on this?

4

Here you go: https://youtu.be/E68d0yyxpo8?feature=shared

5

thank you for the link!

6

@digisavvy I just watched this tutorial and was able to replicate everything you showed in the video. However, I’m curious if you ever got the JS working for the expiration of the cookie. I don’t believe that was covered in the video. I’m attempting to figure out how to implement the JS code you provided in this thread.