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>

does every box have a separate identity/uniquely identifiable value? — Wahab Shah, Sep 28 '21 at 06:33
Then you can get the Respective Gate (like GateA, GateB etc) and also get the id of the box that has been clicked. Once you have something like this `Gate A { obj1, obj2}` etc. Store it in the local storage with `setItem` and once you get them with `getItem` just check if id is present then assign it the relevant style etc. Did you get it? Try it and let me know I will put it up as answer as well — Wahab Shah, Sep 28 '21 at 06:40
Does this answer your question? [Storing Objects in HTML5 localStorage](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — st.huber, Sep 28 '21 at 06:46

score 0 · Answer 1 · answered Sep 28 '21 at 06:39

0

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

answered Sep 28 '21 at 06:39

crgavrila

3
4

score 0 · Answer 2 · answered Sep 28 '21 at 06:44

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.

Save Local Storage Javscript Check

2 Answers2