使用本地/会话存储保存.addClass（）

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.

我的想法是当你点击页面底部的“购买门票”时为选定的椅子添加一个课程,但我怎么能保存这些课程,我的教授们说我应该使用HTML 5存储,但他们拒绝帮助我进一步。

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.

是否可以将使用.addClass()添加的类保存到本地或会话存储?它应该只是一个模拟,所以如果另一台计算机(或其他浏览器)上的某个人可以预订相同的座位并不重要。

Could someone please give me some advice? :)

有人可以给我一些建议吗? :)

1 个解决方案

#1

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

localStorage只能存储字符串值,因此有助于使用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:

在获取或释放座位时,您可以从已保存的数组中添加或删除其ID:

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.

请注意,此代码不是特别健壮,更好的实现将确保避免存储数组中的重复值,单独更改按钮样式,将其id添加到存储等。

I've uploaded a complete example to try out.

我已经上传了一个完整的例子来试用。

#1