$persist - an option to save a variable value to the Session Storage (instead of the Local Storage)

[stepanjakl]

Hello,

Thank you for an amazing library and additional tools such as the Persist helper.

The Persist plugin allows to save the values to the Local Storage. It may be worth giving an option to save into the Session Storage. I see a use case in the use of page banners which you may want to show every time the user comes back. A key message/news could change and the Local Storage variable would hide the banner if the user dismissed it in the previous session(s). I believe that Local Storage has no expiration time, whereas Session Storage clears all data at the end of the page session.

Syntax could look like this for instance: $persist.session(var) or $persist(var).via('sessionStorage') / $persist.indefinitely(var) or $persist.via('localStorage') ETC. (other suggestions are welcomed)

What do you think?:)

PS: eventually cookies could be included with expiry time periods as well

[SimoTod]

The only problem with sessionStorage is that it doesn't work as people expect. The session is per tab so 2 tabs opened next to each other and visiting the same page have different sessionStorages which I find really annoying and I'm sure it would trick people.

[stepanjakl]

I feel you, but that's how Session Storage operates as a native browser functionality.

Possible workaround: https://stackoverflow.com/a/32766809/11035513

[SimoTod]

Yeah, to be fair it's the standard behaviour so as long as it's mentioned im the documentation, it should be fine.

I also wonder if persist could support an expiry date (useful for local storage).
$persist(false).for('1 day')

[stepanjakl]

Yeah, to be fair it's the standard behaviour so as long as it's mentioned im the documentation, it should be fine.

I also wonder if persist could support an expiry date (useful for local storage).
$persist(false).for('1 day')

No, you can only do expiry date with cookies.

"LocalStorage has no expiration time, Data in the LocalStorage persist till the user manually delete it. This is the only difference between LocalStorage and SessionStorage" -- https://www.geeksforgeeks.org/localstorage-and-sessionstorage-web-storage-apis/

[SimoTod]

That doesn't matter too much, it's on your implementation. persist can save a json containing a timestamp field and a value field and it can then decide to use the stored value or the default one based on the expiry.

Cookies shouldn't really be used to store info like that imo (personal opinion, though).

[stepanjakl]

Ahh, yes, using the timestamp sounds like a good approach 👍

[SimoTod]

I played a bit with that idea and we can have $persist('foo').in(sessionStorage) with just 17 bytes more.

It would also support any custom storage object exposing getItem and setItem so it's possible to have
For example

    <script>
      window.cookieStorage = {
        getItem(key) {
          let cookies = document.cookie.split(";");
          for (let i = 0; i < cookies.length; i++) {
            let cookie = cookies[i].split("=");
            if (key == cookie[0].trim()) {
                return JSON.parse(decodeURIComponent(cookie[1]));
            }
          }
          return null;
        },
        setItem(key, value) {
          document.cookie = key+' = '+encodeURIComponent(JSON.stringify(value))
        }
      }
    </script>

    <div x-data="{ open: $persist(false).in(cookieStorage) }">
        <button @click="open = !open">Toggle</button>

        <span x-show="open">
            Content...
        </span>
    </div>

I've just created a PR to fix another issue with $persist. I'll mention this thread so we can see if Caleb would accept the feature.

[calebporzio]

Dude, this is freaking brilliant. I love it.

The only question remaining is: Is .in() the best name. I think it is, but the other options would be .into or to.

If I were speaking the code like a sentence, I'd say "to" -> "Persist this variable TO session storage"

How do you feel about "to"

Anyhow, let me say again how I love this in that it allows for extending the behavior with the exact same API that the browser uses so you can easily just use those. Solid stuff. Would gladly accept PR

[SimoTod]

Brilliant, I switched to 'to(...)'. 👍

[robdekort]

Just found out about .using(sessionStorage). This is brilliant for this "annoyance bar" I had to add to a site. Thanks @SimoTod.