问题描述
- 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提交到数据库。
时间： 2024-10-07 16:43:38