用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>
展开
收起
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
1
条回答
写回答
-
你要保存到数据库去啊，然后从数据库读取已经添加的记录显示。
不和服务器交互就要使用cookie或者浏览器本地存储将你的数据存起来，下次从cookie和本地存储中读取后显示出来
JavaScript本地存储(DOM Storage,Local Storage)
2019-07-17 19:04:03赞同 展开评论
相关问答