How to implement tab-dependent storage?

Question

How to implement tab-dependent storage?

30 views Asked by Javi Albors At 29 March 2024 at 11:56

I'm trying to store some data through localStorage so I can load it again in the same page of a web if this page is refreshed.

Imagine a user writing a comment, he refreshes the page and I want to load again the comment through localStorage so the user can keep editing his comment after that refresh.

The issue I'm facing is that, what if the user has multiple tabs open on the same page, writing different comments? How could I retrieve the correct information for one specific tab?

Original Q&A

There are 2 answers

Alexander Nenashev On 29 March 2024 at 12:01

Just make a storage key unique. For example include a topic or replied comment id in it:

localStorage.setItem(`reply-to-${topic.id}`, comment.text);

You can use also sessionStorage that unique per a tab. But closing the tab will destroy it.

**Alexander Burov** · Accepted Answer · 2024-03-29T12:20:16+00:00

SessionStorage is exactly what you need. It behaves the same way as localStorage, but is dedicated to the page session. The downside of sessionStorage is that if the user will close the tab, he'll loose it.

So, depending on your use case you can use:

Local Storage, but if user has two tabs, one will override another;
Session Storage, but is user closes the tab, he'll loose data. And when he'll open the same page, he won't see his changes;
You can combine two storages: store to both and read from the Session Storage first. In that case user will have independent pages with safe refreshing, and in case he close the tab, he'll get the data from the Local Storage once he opens the same page again (if multiple pages were opened before that, he'll get the latest version).

See:


<!DOCTYPE html>
<html>
<head>
    <title>Storages</title>
</head>
<body>
    <div>
        <label for="local">LocalStorage</label>
        <input id="local" value="" onkeyup="localStorage.setItem('value1', this.value)" />
    </div>

    <div>
        <label for="session">SessionStorage</label>
        <input id="session" value="" onkeyup="sessionStorage.setItem('value2', this.value)" />
    </div>

    <div>
        <label for="sessionBackedByLocal">SessionStorage backed by LocalStorage</label>
        <input id="sessionBackedByLocal" value="" onkeyup="[sessionStorage, localStorage].forEach(s=>s.setItem('value3', this.value))" />
    </div>

    <script type="text/javascript">
    var local = localStorage.getItem('value1');
    if (local) {
        document.getElementById('local').value = local;
    }

    var session = sessionStorage.getItem('value2');
    if (session) {
        document.getElementById('session').value = session;
    }

    var sessionBackedByLocal = sessionStorage.getItem('value3');
    if (session) {
        document.getElementById('sessionBackedByLocal').value = sessionBackedByLocal;
    } else {
        sessionBackedByLocal = localStorage.getItem('value3');
        document.getElementById('sessionBackedByLocal').value = sessionBackedByLocal;
    }
    </script>

</body>
</html>

TechQA.

How to implement tab-dependent storage?

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in LOCAL-STORAGE

Popular Questions

Popular Tags

Trending Questions