求助，订票网站怎么保存状态

如题，目前是一个刚学前端的学生，一个作业要求做一个订票网站，导入XML数据，并且能够显示订票的信息（日期、时间、价格等）
以上功能全部做出来测试发现一个大问题，比如我预定了2018年9月19日 9:00这一场的票，随便几个座位，点击提交后座位状态变化为已购买状态，不能重复购买，然后这个时候我随便切换了一个时间或者日期，状态依旧是锁死的，我的思路是点击了提交按钮应该保存一个当前时间日期的页面状态，然后更改时间和日期后读取相应的页面状态，默认是原始页面，但是想了半天没想出来怎么写，想用数组实现该功能以失败而告终HTML页面如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> Taupo Boat Adventure </title>    
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>   
    <section class="container">
        <h1 class="title"> Taupo Boat Adventure</h1>  
        <div class="content" id="box">
            <div class="selects" >
                <select id="selects">
                  <option value="1" >Rose Boat</option>
                  <option value="2" >Princess Boat</option>
                </select> 
            </div>
<div>
<input id="selectdate" type="date" >
</div>
<div>
<select id="selecttime">
                    <option value="9:00">9:00</option>
                    <option value="12:00">12:00</option>
                    <option value="15:00">15:00</option>
                    <option value="18:00">18:00</option>
                </select>
</div>
<div>
<button id="submit" onClick="submit()" >Submit</button>
</div>
            <div class="price" id="price">
Date:<span id="date"></span><br>
Time:<span id="time"></span><br>
            Total Price: $ <span id="num">0</span><br> 
[color=#FF0000] Information: <br><span id="information"></span>
            </div>
            <div id="content">
            </div>
        </div>
    </section>
    <script src="js/jquery.js"></script>
    <script src="js/script.js"></script>
</body>
</html>CSS页面如下：/*style css*/
body
{ background-image: url(../haidaochuan.jpg);
background-repeat: no-repeat;
}
.container
{
width: 70%;
margin: 0 auto;
}
h1
{
font-size: 36px;
    padding: 15px;
    text-align: center;
border-radius: 15px;
background: hsla(47,52%,82%,1.00);
}
#box
{
background: hsla(47,85%,48%,1.00);
border-radius: 15px;
height: auto;
}
#selects
{
font-size: 20px;
    padding: 5px;
    text-align: center;
border-radius: 15px;
float: left;
background: hsla(343,100%,47%,1.00);
width: 150px;
height: 50px;
}
#selectdate
{
font-size: 20px;
    padding: 5px;
border-radius: 15px;
float: left;
background: hsla(291,93%,48%,1.00) ;
width: 150px;
height: 37px;
}#selecttime
{
font-size: 20px;
    padding: 5px;
    text-align: center;
border-radius: 15px;
float: left;
background: hsla(209,95%,44%,1.00) ;
width: 150px;
height: 50px;
}
#submit
{
font-size: 20px;
    padding: 5px;
    text-align: center;
border-radius: 15px;
float: left;
background: hsla(22,91%,50%,1.00);
width: 150px;
height: 50px;
}
#price
{
font-size: 20px;
    padding: 10px 0px;
    text-align: center;
border-radius: 0px 15px 15px 15px;
background: hsla(144,91%,47%,1.00) ;
height: auto;
float: right;
width: 300px;
}
#content
{
width: 60%;
position: relative;
top: 50px;
border-radius: 15px;
height: auto;
}table
{
position: relative;
top: -50px;
border-radius: 15px;
width: 100%;
border-collapse:collapse;
border-spacing:0;
}
table th, table td
{
width: 3%;
padding: 20px 0;
}
table td
{
background-image: url(../zuowei2.png);
background-repeat: no-repeat;
background-position: center;
height: 20px;
}
table td.dotted
{
background-image: url();
background-repeat: no-repeat;
background-position: center;
}
table td.disabled
{
background-image: url(../zuowei3.png);
background-repeat: no-repeat;
background-position: center;

}
table td.selected
{
background-image: url(../zuowei1.png);
background-repeat: no-repeat;
background-position: center;
}JQ的不列出来
JS的页面如下"use strict";
window.onload =initialstatus(); //一点开就加载初始页面
function initialstatus()//定义初始页面 
{
    var Showpage = document.getElementById('content');//定义变量与页面显示区域关联
    var XMLpage = 'Rose Boat.xml';//定义变量与XML关联，默认是第一个XML
    var XMLoption = 1;//定义变量与XML选项关联，默认是1
    var select = document.getElementById('selects');//定义变量与页面第一个下拉选项关联
    var num = document.getElementById('num');//定义变量与页面右侧总价显示关联
var information = document.getElementById('information');//定义变量与页面右侧信息显示关联
document.getElementById("selects").value=1;//定义初始页面选项是1    function getData(XMLoption) //定义功能加载XML文件 
{
        if(XMLoption === '1') 
{
            XMLpage = 'Rose Boat.xml';
        } 
        if(XMLoption === '2') 
{
            XMLpage = 'Princess Boat.xml';
        } 
        jQuery.ajax
(
  {
            type: "get",
            url: XMLpage,
            dataType: "html",
            data: {},
            beforeSend: function() 
{
                Showpage.innerHTML = '<div class="load">loading...</div>';
            },
            success: function(msg) 
{
                console.log(msg);
                Showpage.innerHTML = msg;
            },
            error: function(err) 
{
                console.log(err);
            }
          }  
);
    }

getData(XMLoption);//加载XML页面，默认值是1select.onchange = function() //定义第一个选项发生变化后的功能
{
  XMLoption = this.value;//把选项的值赋给变量
  getData(XMLoption);//执行之前定义的加载XML功能
};
document.getElementById("content").onclick = function(clickseat) //定义页面中点击后的功能
{
   var changeseatstatus = clickseat.target;//定义变量关联点击后触发事件
   if(changeseatstatus.tagName === 'TD') //如果变量的标签名称是TD
   {
      var disabledstatus = jQuery(changeseatstatus).hasClass('disabled');//定义变量与XML文件中有TD标签的有disabled类相关联
      var dotteddstatus = jQuery(changeseatstatus).hasClass('dotted');//定义变量与XML文件中有TD标签的有dotted类相关联
      var selectedstatus = jQuery(changeseatstatus).hasClass('selected');//定义变量与XML文件中有TD标签的有selected类相关联
      if (disabledstatus)//如果是关闭不可选状态，则弹出提示框 
     {
          alert('seats have already been taken.');       
         } 
  else if (selectedstatus) //如果是选好状态，并且不是空状态，则将该元素标签中类移除selected
     {
  if (!dotteddstatus) 
   {
              jQuery(changeseatstatus).removeClass('selected');  
           }    
         } 
   else                     //如果是可选状态，并且不是空状态，则将该元素标签中类添加selected
     {
          if (!dotteddstatus) 
  {
               jQuery(changeseatstatus).addClass('selected');
          }
         }
    }

var account=0;//定义变量，初始为0
var Allinformation='';//定义变量，初始是空

var checked = jQuery(changeseatstatus).parents('table').find('.selected');//定义变量，查找拥有selected类的所有标签
 
for (var k = 0; k < checked.length; k++) //循环查找到所有刚才符合要求的标签
  {
         var price = jQuery(checked[k]).parents('tr').data('price');//定义变量，获取到刚才符合要求标签的价格值
 var row = jQuery(checked[k]).parents('tr').data('row');//定义变量，获取到刚才符合要求标签的行值
 var seat = jQuery(checked[k]).data('seat');//定义变量，获取到刚才符合要求标签的座位值
         account = account + parseInt(price);//定义总价等于刚才所有符合要求的价格的和
 Allinformation = Allinformation+'Row:  '+row+'  Seat:  '+seat+'  $'+price+'<br />';//定义所选座位信息，包括行号码座位号码和单价
      }     
num.innerHTML = account; //将总价的值赋给右侧显示信息框中
information.innerHTML = Allinformation; //将所选座位信息的值赋给右侧显示信息框中
};

function gettime ()//定义获取日期时间功能
{
var x = document.getElementById("date").value;//定义变量获取日期的值
    document.getElementById("date").innerHTML = x;//将所选日期的值赋给右侧显示信息框中
var y = document.getElementById("shijian").value;//定义变量获取时间的值
    document.getElementById("time").innerHTML = y;//将所选时间的值赋给右侧显示信息框中
}
setInterval(gettime, 10);//循环执行该功能，每10毫秒来一次
} function submit()//定义提交座位功能
{
var r=confirm("Please confirm the booking information on the right side.");//定义弹出确认框，确认右侧信息
         if (r===true)//如果点击确定
         {
alert("Reservation success.");//弹出提示框，订购成功
          for(var k=0; k<200; k++)//通过循环查找所有ID中含有selected类的标签
     {
     if(document.getElementById(k).className === 'selected')//查找到后
   {
     document.getElementById(k).className = 'disabled'; //将其改类     
   }
     }
         }
        else
        {
          alert("Please change the reservation information.");//如果点击了取消，则弹出提示框，继续预定
        }
savestatus();
}var changedate = document.getElementById('selectdate');
changedate.onchange = function()
{
getstatus();
};var changetime = document.getElementById('selecttime');
changetime.onchange = function() 
{
getstatus();
};function savestatus()
{

}
function getstatus()
{

}请教各位大神？我这个思路是否正确？如果正确应该怎么写呢？目前我们还没学习cookie等，我自己看了看教程没有成功，如果思路不正确有什么好办法呢？？