将.addClass（）与本地/会话存储一起保存

Question

For a school project I need to make a booking system for a cinema, so people can select seats where they want to sit.

One requirement is that if someone booked a chair, someone ele shouldn't be able to book it anymore.

My idea was to add a class to the selected chairs when you click "Buy tickets" on the bottom of the page, but how can I save these classes, my professors say I should use HTML 5 storage, but they refuse to help me any further.

This is a part of what I already have now:

<script>
 var total = 0;
 var countBlauw = 0;
 var countOranje = 0;
 var countRood = 0;
 $(document).ready(function(){
     $(".blauw").toggle(function () {
       $(this).removeClass("blauw").addClass("select");
 countBlauw++;
 total+=7.5;
 calculateTotal();
 }, function() { 
       $(this).removeClass("select").addClass("blauw");
 countBlauw--;
       total-=7.5;
 calculateTotal();
     });
 $(".oranje").toggle(function () {
       $(this).removeClass("oranje").addClass("select");
 countOranje++;
 total+=10;
 calculateTotal();
 }, function() {
       $(this).removeClass("select").addClass("oranje");
 countOranje--;
       total-=10;
 calculateTotal();
     });
 $(".rood").toggle(function () {
       $(this).removeClass("rood").addClass("select");
 countRood++;
       total+=15;
 calculateTotal();
 }, function() {
       $(this).removeClass("select").addClass("rood");
 countRood--;
       total-=15;
 calculateTotal();
     });
 });
 </script> 
        <script>
        function calculateTotal()
        {
            var divobj = document.getElementById('totalPrice');
            divobj.style.display='block';
            divobj.innerHTML = "Prijs €"+total+"<br /> Aantal blauwe stoelen: "+countBlauw+"<br /> Aantal oranje stoelen: "+countOranje+"<br /> Aantal rode stoelen: "+countRood;

        }
        </script> 

        <table style="empty-cells: hide; border-collapse:separate; border-spacing:2px; border-style:solid;" border="0">
          <tr>
            <td class="leeg"></td>
            <td class="leeg"></td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="leeg"></td>
            <td class="leeg"></td>
          </tr>
            And so forth.


        <script>
 $(window).load( function() {
  document.getElementById('totalPrice').innerHTML = "Prijs €"+total+"<br /> Aantal blauwe stoelen: "+countBlauw+"<br /> Aantal oranje stoelen: "+countOranje+"<br /> Aantal rode stoelen: "+countRood;
 });
 </script>
        <div id="totalPrice"></div>

Is it possible to save the classes added with .addClass() to local or session storage? It's should only be a simulation, so it doesn't matter if someone on another computer (or with an other browser) can book the same seat.

Could someone please give me some advice? :)

Answer 1

localStorage can only store string values, so it helps to save the array using JSON:

function loadTakenSeats() {
    takenSeatsString = localStorage.takenSeats;
    return takenSeatsString
        ? JSON.parse(takenSeatsString)
        : [];
}

function saveTakenSeats(takenSeats) {
    localStorage.takenSeats = JSON.stringify(takenSeats);
}

When a seat is taken or released, you add or remove its id from the saved array:

function takeSeat(seat) {
    $(seat).addClass('taken');
    var takenSeats = loadTakenSeats();
    takenSeats.push(seat.id);
    saveTakenSeats(takenSeats);
}

function untakeSeat(seat) {
    $(seat).removeClass('taken');
    var takenSeats = loadTakenSeats();
    takenSeats.splice(takenSeats.indexOf(seat.id),1);
    saveTakenSeats(takenSeats);
}

When the page loads, you'll have restore the state of the buttons from storage:

  $.each(loadTakenSeats(), function(i, seat){
        $('#'+seat).addClass('taken');
  });

Note that this code isn't particularly robust, a better implementation would make sure to avoid duplicate values in the stored array, separate changing the button style from adding its id to storage, etc.

I've uploaded a complete example to try out.