saveData.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>暂存表格数据</title>
</head>
<body>
<table id="myTable">
<tr>
<td>ID</td>
<td>Name</td>
<td>Sex</td>
</tr>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>女</td>
</tr>
</tbody>
</table>
<br><br>
<button onclick="saveData()">保存表格数据</button>
<br><br>
<a href="./get_remove_data.html" target="_blank">获取表格数据</a>
<script>
function saveData(){
var table = document.getElementById('myTable');
var data = '';
for (var i = 0; i < table.rows.length; i++) { //行数
for (var j = 0; j < table.rows[i].cells.length; j++) { //列数
data += table.rows[i].cells[j].innerHTML + ',';
}
data += '\n'; //每行结束换行
}
localStorage.setItem('tableData', data); //保存至浏览器本地存储
alert('表格数据已保存');
}
</script>
</body>
</html>get_remove_data.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取表格数据&清除本地存储的表格数据</title>
</head>
<body>
<p id="demo"></p>
<br><br>
<button onclick="getData()">获取表格数据</button>
<br><br>
<button onclick="removeData()">清除本地存储的表格数据</button>
<script>
function getData(){
var data = localStorage.getItem('tableData'); //获取数据
document.getElementById('demo').innerText = data;
}
function removeData(){
localStorage.removeItem('tableData');
}
</script>
</body>
</html>