2017-04-19 100 views
-2

我是JavaScript新手,所以我沒有那麼多的想法,這是最好的方法。如何在刷新頁面時在HTML外部保存數據?

這是我的HTML代碼:

<!doctype html> 
<html lang="en"> 
<html> 
<head> 
<title>System Links</title> 
<link rel="stylesheet" type="text/css" href="graphics.css" /> 
<script type="text/javascript" src="Brain.js"></script> 
</head> 
<body> 
<h1 id="hello">Test-Page-Production</h1> 
<div id="button2" ><a href="FrontPage.html">Production</a></div> 
<div id="button2"><a href="SecondPage.html">NonProduction</a></div> 


<table id= "Hello" style="height:;width:100%; position: absolute; top: 200px; bottom: 0; left: 0; right: 0;border:1px solid" > 
    <thead> 
    <tr> 
    <th>CheckBox</th> 
    <th>Host</th> 
    <th>SID</th> 
    <th>NR</th> 
    <th>SCS</th> 
    <th>Type</th> 
    <th>URL</th> 
    <th>SAP Components</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr > 
    <td><INPUT type="checkbox" name="chk"/></td> 
    <td>Host Name</td> 
    <td>SID</td> 
    <td>4</td> 
    <td>17</td> 
    <td>ABAP</td> 
    <td><a href="https://www.facebook.com/">Links</a></td> 
    <td>HanaSystem</td></tr> 

    <tr> 
    <td><INPUT type="checkbox" name="chk"/></td> 
    <td>Host Name</td> 
    <td>SID</td> 
    <td>4</td> 
    <td>17</td> 
    <td>ABAP</td> 
    <td>Links</td> 
    <td>HanaSystem</td> 
    </tr> 


    <tr> 
    <td><INPUT type="checkbox" name="chk"/></td> 
    <td>Host Name</td> 
    <td>SID</td> 
    <td>4</td> 
    <td>17</td> 
    <td>ABAP</td> 
    <td>Links</td> 
    <td>HanaSystem</td> 
    </tr> 
    </tbody> 
</table> 

<button id="add" onClick="addRow()"> 
Add Row</button> 


<button id="delete" onClick="deleteCell()"> 
Delete Row</button> 

</body> 
</html> 


This is my javascript code: 

function addRow() 
{ 

var Host=prompt("Enter Host Name"); 
var SID=prompt("Enter System ID"); 
var NR=prompt("Enter the NRsd:"); 
var SystemNumber=prompt("Enter System Number"); 
var Type=prompt("Enter the Type"); 
var URL=prompt("Enter the URL"); 
var SystemComponents=prompt("Enter the System Components"); 

       //tableBody=document.getElementsByTagName("tbody").item(0); 
       var tableBody = document.getElementById('Hello').getElementsByTagName('tbody')[0]; 
       //row=document.createElement("tr"); 
       var row = tableBody.insertRow(tableBody.rows.length); 


       var newCell0 =row.insertCell(0); 
       var cb = document.createElement('input'); 
       var cb=document.createElement('input'); 
       cb.type = 'checkbox'; 
       newCell0.appendChild(cb); 


       // Insert a cell in the row at index 0 
       var newCell = row.insertCell(1); 
       // Append a text node to the cell 
       var newText = document.createTextNode(Host); 
       newCell.appendChild(newText); 


       // Insert a cell in the row at index 0 
       var newCell1 = row.insertCell(2); 
       // Append a text node to the cell 
       var newText1 = document.createTextNode(SID); 
       newCell1.appendChild(newText1); 



       // Insert a cell in the row at index 0 
       var newCell2 = row.insertCell(3); 
       // Append a text node to the cell 
       var newText2 = document.createTextNode(NR); 
       newCell2.appendChild(newText2); 




       // Insert a cell in the row at index 0 
       var newCell3 = row.insertCell(4); 
       // Append a text node to the cell 
       var newText3 = document.createTextNode(SystemNumber); 
       newCell3.appendChild(newText3); 



       // Insert a cell in the row at index 0 
       var newCell4 = row.insertCell(5); 
       // Append a text node to the cell 
       var newText4 = document.createTextNode(Type); 
       newCell4.appendChild(newText4); 



       // Insert a cell in the row at index 0 
       var newCell5 = row.insertCell(6); 
       // Append a text node to the cell 
       var newText5 = document.createTextNode(URL); 
       newCell5.appendChild(newText5); 


       // Insert a cell in the row at index 0 
       var newCell6= row.insertCell(7); 
       // Append a text node to the cell 
       var newText6 = document.createTextNode(SystemComponents); 
       newCell6.appendChild(newText6); 

} 

function deleteCell(){ 


//var tableBody = document.getElementById('Hello').getElementsByTagName('tbody')[0]; 
//document.getElementById('Hello').getElementsByTagName('tbody').deleteRow(4); 

//var confirmation=window.confirm("Are you sure you want to delete"); 

var tableBody = document.getElementById('Hello').getElementsByTagName('tbody')[0]; 
var confirmation=window.confirm("Are you sure you want to delete"); 
var rowCount = tableBody.rows.length; 
if(confirmation==true){ 
for(var i=0;i<rowCount;i++){ 
    var row = tableBody.rows[i]; 
    var chkbox = row.cells[0].childNodes[0]; 
    if(null != chkbox && true == chkbox.checked) { 
        tableBody.deleteRow(i); 
        rowCount--; 
        i--; 
       } 
} 
} 


} 

當用戶按下按鈕addrow數據應該得到saved.So如何在我的情況下,最精確的way.Since實現這一whenver用戶點擊刷新按鈕該頁面從頭開始再次刷新而不保存任何數據。

+0

HTML是在客戶端。每當刷新頁面時,服務器都會返回相同的未更改數據。您需要向服務器發送請求並保存更改。 –

+0

你的問題是'爲了外部保存數據',所以你必須知道你不能在客戶端HTML頁面擁有持久數據。你想要如何在外部存儲它的建議嗎?如果是這樣的話,這個問題可能會被過於寬泛地關閉。你能否提供更多關於你正在使用的服務器端技術的信息(如果有的話)? – SeanOB

+0

使用javascript ajax將'json'數據發送到服務器(後端代碼)並將數據保存到那裏。您可以進行回傳來檢查或加載新數據並相應地更新您的HTML標記。 – ThatAwesomeCoder

回答

0

您可以將數據存儲在瀏覽器的localStorage或sessionStorage中。

1)點擊添加按鈕後,保存日期localStorage/sessionStorage。 2)頁面重新加載後,從localStorage/sessionStorage中檢索數據並通過javascript填充表格。

要保存一個項目: sessionStorage.setItem('key','value');

檢索項目 var data = sessionStorage.getItem('key');

API參考這裏: https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage

+0

如果我使用本地存儲,然後是否每個客戶端都可以動態添加數據,以及對於每個客戶端是否顯示由其他客戶端添加的數據,那麼我有這個問題? –

+0

是的,每個客戶端都可以動態添加數據。但是每個客戶端只會看到他們自己的數據(因爲它是由他們自己的瀏覽器本地存儲的)。 – SeanOB

+0

但我需要充分的靈活性,以便每個客戶端都可以看到其他客戶端添加的數據。那麼有沒有辦法做到這一點? –

相關問題