Save Local Storage Javscript Check

Question

So I have a list of hotel data, and if you click on it the color of the box becomes red. The problem is, how to save the results of the box that has been clicked (turned red) in Local Storage.

<script>
    let rooms = 0;
    if (typeof(Storage) !== "undefined")
        console.log("Local Storage Available");
    else
        console.log("Opps.. No have Local Storage")
        
    function syncLocalStorage(activity, item, status) {
        switch (activity) {
            case 'ADD':
                break;
            case 'UPDATE':
                break;
            case 'DELETE':
                break;
            default:
                break;
        }
    }
        
    function spawnGate(gateName, roomCount) {
        const tpl = Array.from({
            length: roomCount
        }, (_, i) => i + 1).map(xx => {
            return `<div class="room" onclick="reserved(this, ${xx + rooms})"><span>${xx + rooms}</span></div>`;
        }).join('');
        rooms += roomCount;
        document.querySelector('#hotel').innerHTML += `<div class="gate">
            <h2>${gateName}</h2>
            <div class="rooms">${tpl}</div>
            </div>`;
        syncLocalStorage('ADD', tpl.value)
    }
        
    function reserved(el, num) {
        el.classList.toggle('reserved')
    }

    document.addEventListener('DOMContentLoaded', function(e) {
        e.preventDefault();
        spawnGate('Gate A', 24);
        spawnGate('Gate B', 24);
        spawnGate('Gate C', 24);
    }, false);
</script>

Answer 1

In your switch case you can call window.localStorage.getItem/ window.localStorage.setItem depending of your use case.

Check the docs out: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Or you can use a library like localforge

Answer 2

Each gate/room needs a ID that uniquely identifies it. Then you can use Window.localstorage to save and retrieve data from the browser's local storage.

Example:

function syncLocalStorage(activity, item, status) {
     // item being "Gate A" for instance with status "reserved"
     switch(activity) {
      case 'ADD':
        localStorage.setItem(item, status); 
        break;
      case 'UPDATE':
        // you could also use localStorage.getItem(item) first and update the item 
        // before updating it with setItem().
        localStorage.setItem(item, status); 
        break;
      case 'DELETE':
        localStorage.removeItem(item, status); 
        break;  
      default:
        // what should happen here?
        break;
      }
     }
}

When you load the page the next time, even in a new browser session, you can set the gate values like so:

document.getElementById("ID of Element").innerHTML = localStorage.getItem(key);

LocalStorage gets persisted across browser sessions, while SessionStorage is only valid during the current browser session.