问题描述

Java新人求解答:用js实现关闭或刷新页面时如何保存更改信息?

如题,我做了一个网站,如下代码，现在的问题是网站可以修改，但是一旦刷新或重新登录后又恢复原状了。
请问改写什么代码才能保存网页修改的信息?

 <%@ page import ="java.util.*" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  

<html>
<head>
    <title>Welcome to the TV_Play Web!</title>  

<script type="text/javascript">
             // 新增
            function trdadd(){
            flag=false;
      document.getElementById("fid").style.display="block"; //控制显示
      chongzhi();
         document.getElementById("aid").disabled=false; //重新启用  

      }  

      //保存
      function baocun(){
            if(flag==false){  

      add(flag);
      document.getElementById("fid").style.display="none";
            }else{  

              add(flag);
              document.getElementById("fid").style.display="none";  

            }
      }  

      //重置
      function chongzhi(){
       document.getElementById("formid").reset();
      }  

      //删除
      function deleteRow(input){
          var s=input.parentNode.parentNode.rowIndex;
          document.getElementById("tableid").deleteRow(s);
          var num=document.getElementById("tableid").rows.length;
          for(var i=1;i<num;i+=1){
             table.rows[i].cells[0].innerHTML=i; //把每行的每一列设为i  

             }
             alert("Delete Successfully ！！");  //删除成功
       }  

</script>  

</head>
<body>
Welcome to the TV_Play Web!<br>
<input type="button" value="new" onclick="trdadd()">
<center>
<table id="tableid" border="1" cellpadding="0" cellspacing="0" width="100%" >
<thead>
<tr>
           <td>id</td>
           <td>name</td>
           <td>language</td>
           <td>country_of_origin</td>
           <td>genre</td>
           <td align="center" width = "15%">operation</td>  <!-- 操作 -->
      </tr>
      </thead>
     </table>
      <br>
      <br>
      <br>  

      <div id="fid" style="display : none">
      <form id="formid">
     <table id=aaid>
     <tr>
      <td colspan="6">name : <input id="aid" type="text" size="20%"> </td>
      <td colspan="6">language : <input id="bid" type="text" size="20%"> </td>
     </tr>
     <tr>
      <td colspan="6">country_of_origin : <input id="cid" type="text" size="20%"></td>
      <td>genre :
       <select id="eid" name="my_name">
          <option value="1">Sitcom</option>
          <option value="2">Horror</option>
          <option value="3">Fantasy</option>
          <option value="4">Science Fantasy</option>
          <option value="5">Crime Drama</option>
          <option value="6">Period Drama</option>
          <option value="7">Family</option>
       </select>
     </td>
     </tr>  

     </table>  

        <input type="button" value="save" onclick="baocun()">
        <input type="reset" value="reset" onclick="chongzhi()"> <!-- 重置type类型必须为reset-->  <!-- 重置 -->
    </form>
       </div>  

    </center>
    <script type="text/javascript">
       //全局变量
       var table=document.getElementById("tableid");
       var flag=false;
       var getselectrow;
       function getNum(){
            var haoRow=table.rows[0];
            return haoRow.cells.length;
       }  

       //添加方法  

       function add(flag){
          if(!flag){
         // var num=getNum();
          var row=table.insertRow(-1); //为-1时往下加（升序），为0时往上加（id降序）
          var add1=row.insertCell(0);
          var add2=row.insertCell(1);
          var add3=row.insertCell(2);
          var add4=row.insertCell(3);
          var add5=row.insertCell(4);
          var add6=row.insertCell(5);  

         add1.innerHTML=document.getElementById("tableid").rows.length-1;//不加-1时id从二开始；原因：标题占一个
         add2.innerHTML=document.getElementById("aid").value;
         add3.innerHTML=document.getElementById("bid").value;
         add4.innerHTML=document.getElementById("cid").value;
         var tall=document.getElementById("eid");
         var   index=tall.selectedIndex;// 当前坐标
         var option=tall.options[index];
         add5.innerHTML=option.text;
         add6.innerHTML="<input type='button' value='revise' onclick='updateRow(this)'> <input type='button' value='delete' onclick='deleteRow(this)'>";
         //alert(num);
         alert("Add Successfully！！");   //添加成功

         }else{  

            var row2=table.rows[getselectrow];//选中当前行
                   //把修改后的值设置到对应的文本框中
            row2.cells[1].innerHTML=document.getElementById("aid").value;
            row2.cells[2].innerHTML=document.getElementById("bid").value;
            row2.cells[3].innerHTML=document.getElementById("cid").value;
            var pall=document.getElementById("eid");
            var index=pall.selectedIndex; //当前坐标
            var option=pall.options[index];
            row2.cells[4].innerHTML=option.text;  

            alert("Revise Successfully！！");   //修改成功
         }
    }  

          //修改
         function updateRow(input){
         flag=true
         document.getElementById("aid").disabled=true;   //不能启用
         document.getElementById("fid").style.display="block";  

         var i=input.parentNode.parentNode.rowIndex;  

            getselectrow=i;
               //得到选中行的内容放到文本框
         document.getElementById("aid").value=table.rows[i].cells[1].innerHTML;
         document.getElementById("bid").value=table.rows[i].cells[2].innerHTML;
         document.getElementById("cid").value=table.rows[i].cells[3].innerHTML;  

          var select=document.getElementById("eid");
            var index=select.selectedIndex;// 当前坐标
            var option= select.options[index];
            option.text=table.rows[i].cells[4].innerHTML;  

        }
    </script>
</body>
</html>  

解决方案

保存数据到数据库中，每次刷新重新获取数据

解决方案二：

你要保存到数据库去啊，然后从数据库读取已经添加的记录显示。

不和服务器交互就要使用cookie或者浏览器本地存储将你的数据存起来，下次从cookie和本地存储中读取后显示出来

JavaScript本地存储(DOM Storage,Local Storage)

解决方案三：

学了高等数学，没记在脑子里，结果现在全忘了。你只修改了页面，数据没存起来，下次肯定恢复原样了。ajax提交到数据库。