即使在我们关闭浏览器后也想保留红色答案

【问题标题】：Want to retain the red color even after we closed the browser即使在我们关闭浏览器后也想保留红色
【发布时间】：2018-08-01 02:09:08
【问题描述】：

 

var add  = [];
var tbl = document.getElementById("seat");

if (tbl != null) {

    for (var i = 0; i < tbl.rows.length; i++) {

        for (var j = 0; j < tbl.rows[i].cells.length; j++)
        {
            tbl.rows[i].cells[j].onclick  = function () {
        	
        	this.bgColor="red";  //when click the particular seat number, table cell color changed to red
        	            
        	add.push( this.innerHTML );
        	
        	getval();
            	
            };
        }        
    }
}

    
function getval () {  
    document.getElementById("userinput").value = add.join(","); //add that seat number to array with comma
}

 
   <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ticket Booking</title>
<style>
body {
    background-color:lightgreen ;
    }
</style>

</head>
<body>
<form action="Booking" method="post">
Enter your name:<input type="text" name="name"><br></br>
select your movie:<select name="movies">
<option value="Aval">Aval</option>
  <option value="Avan">Avan</option>
  <option value="SMS">SMS</option>
  <option value="Amman">Amman</option>
  <option value="Amman">Balloon</option>
</select><br></br>
select your show time:<select name="showtime">
<option value="9AM">9AM</option>
  <option value="1PM">1PM</option>
  <option value="4PM">4PM</option>
  <option value="8PM">8PM</option>
</select><br></br>
<TABLE BORDER="1" WIDTH="50%" id="seat"bgcolor="green" >
   <TR ALIGN = "CENTER">Seating Arrangement</TR>
   <TR ALIGN = "CENTER" >
      <TD>A1 </TD> //These are seat numbers
      <TD >A2</TD>
      <TD>A3</TD>
      <TD >A4</TD>
      <TD>A5</TD>
      
   </TR>
    <TR ALIGN = "CENTER" >
      <TD>B1</TD>
      <TD>B2</TD>
      <TD>B3</TD>
      <TD>B4</TD>
      <TD>B5</TD>
      
   </TR>
   <TR ALIGN = "CENTER" >
      <TD >C1</TD>
      <TD>C2</TD>
      <TD>C3</TD>
      <TD>C4</TD>
      <TD>C5</TD>
      
   </TR>
    <TR ALIGN = "CENTER" >
      <TD>D1</TD>
      <TD>D2</TD>
      <TD>D3</TD>
      <TD>D4</TD>
      <TD>D5</TD>
      
   </TR>
    
    <TR ALIGN = "CENTER" >
      <TD>E1</TD>
      <TD>E2</TD>
      <TD>E3</TD>
      <TD>E4</TD>
      <TD>E5</TD>
      </TR>
  </TABLE><br></br>
Enter your seat number : <input type="text" name="seatno" id="userinput"><br></br>

这就是我卡住的地方。当我点击座位号时，颜色从绿色变为红色，但是当我刷新页面时，它不会保留红色。我想保留红色，当另一个用户点击它时，它应该提醒“它已经预订了”。请帮助我。

已预订的门票应为红色。

【问题讨论】：

将您的值存储在某处，localStorage，数据库...
您是否将选定的座位保存到数据库中？
是的。使用 java servlet 从 jsp 获取这些详细信息并使用 Dao 类（Mysql 数据库）将其存储在数据库中

标签： javascript html

【解决方案1】：

function load_colors() {
  var seats = document.getElementsByClassName('td_seat');

  for (var i = 0; i < seats.length; i++) {

    seats[i].addEventListener('click', function() {
      this.bgColor = 'red';
      try {

        localStorage.setItem(this.id, 'red');
      } catch (e) {
        console.log("StackOverflow snippet doesn't allow localStorage");
      }

    }, false);
    try {


      var color = localStorage.getItem(seats[i].id);
      if (color) {
        seats[i].bgColor = color;
      }
    } catch (e) {
      console.log("StackOverflow snippet doesn't allow localStorage");
    }

  }


}

td {
  border: 1px solid #ccc;
  padding: 10px;
  cursor: pointer;
}

td:hover {
  background-color: gold;
}

<html>

<body onload="load_colors();">
  <table>
    <tr>
      <td class='td_seat' id='seat_1'>1</td>
      <td class='td_seat' id='seat_2'>2</td>
      <td class='td_seat' id='seat_3'>3</td>
    </tr>
    <tr>
      <td class='td_seat' id='seat_4'>4</td>
      <td class='td_seat' id='seat_5'>5</td>
      <td class='td_seat' id='seat_6'>6</td>
    </tr>
    <tr>
      <td class='td_seat' id='seat_7'>7</td>
      <td class='td_seat' id='seat_8'>8</td>
      <td class='td_seat' id='seat_9'>9</td>
    </tr>
  </table>

</body>

</html>

一种方法是使用localStorage 对象。

我更新了我的答案，以便它应该像你描述的那样工作。但是，stackOverflow sn-ps 是沙盒的，无法访问 localStorage 对象。但是，如果您在最后尝试一下，它应该可以正常工作。

【讨论】：

一个用户 localstorage 不会为其他用户更改它。
我只是在提供灵感。修正了我的回答以说明您的评论。 @MunimMunna
你太好了，我会试试这个
它不工作。实际上，当点击我用逗号运算符获取座位号时，我将它存储在数据库中
@Pallavi Javascript 控制台中的任何错误？你用的是什么浏览器？