Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to implement tab-dependent storage?

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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:

    1. Local Storage, but if user has two tabs, one will override another;
    2. 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;
    3. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search