如何窗口重裝後保留動態創建的表

Question

我的代碼上的一個按鈕

-Createlist()叫上的點擊創建動態表「創建表」按鈕，增加了每個錶行單擊

-Deletelist()被稱爲上「刪除表」按鈕，刪除行

var flag =0; 
function createlist(){ 
    var info = {}; 
    info.name = document.forms["myform"]["name"].value; 
    info.gender = document.forms["myform"]["gender"].value; 
    info.age = document.forms["myform"]["age"].value; 
    var header; 
    var node = []; 
    node[0] = document.createTextNode('Name'); 
    node[1] = document.createTextNode('Gender'); 
    node[2] = document.createTextNode('Age'); 

    if(flag==0){ 
     for(var i=0;i<3;i++){ 
      var header = document.createElement('TH'); 
      header.setAttribute('class','header'); 
      header.appendChild(node[i]); 
      document.getElementById('list').appendChild(header); 
      flag = 1; 
     } 
    } 

    var tr = document.createElement('TR'); 
    for(var key in info){ 
     if (info.hasOwnProperty(key)) { 
      var td = document.createElement('TD'); 
      td.textContent = info[key]; 
      tr.appendChild(td); 
     } 
    } 
    document.getElementById('list').appendChild(tr); 
} 

Answer 1

我不是真的這個方法的粉絲。我建議爲此使用數據庫，並在每次頁面加載時獲取數據。如果有人構建了一個巨大的桌子，那麼這些信息將被存儲在瀏覽器的本地存儲中...

但是，如果你堅持這樣做，下面是我已經實現它的一個例子。 請注意，由於安全原因，這不適用於SO。對於現場工作示例，請檢查this fiddle。確保你使用簡潔的命名。我使用的mytable示例不是一個很好的示例，因爲如果另一個開發人員也使用該示例，則可以覆蓋此示例。

// this one reads the table and adds it to the storage 
 
function addToStorage() { 
 
    const rows = document.querySelectorAll('#t tbody tr'); 
 
    const col1 = []; // each column will have their own array. Please name them accordingly 
 
    const col2 = []; 
 
    for (let i = 0; i < rows.length; ++i) { 
 
    const tds = rows[i].children; 
 
    col1.push(tds[0].textContent); 
 
    col2.push(tds[1].textContent); 
 
    } 
 
    // "mytable" is just an example. PLEASE PICK A GOOD AND CONCISE NAME ! 
 
    window.localStorage.setItem('mytable', JSON.stringify({ 
 
    col1: col1, 
 
    col2: col2 
 
    })); 
 
} 
 

 
// this one cleans the table (to show PoC) 
 
function clearTable() { 
 
    const t = document.querySelector('#t tbody'); 
 
    t.innerHTML = ''; 
 
} 
 

 
// duh 
 
function makeTd(txtContent) { 
 
    const td = document.createElement('td'); 
 
    td.textContent = txtContent; 
 
    return td; 
 
} 
 

 
// this one gets the info from storage and displays the table content if present 
 
function getFromStorage() { 
 
    const infoFromStorage = window.localStorage.getItem('mytable'); 
 
    if (infoFromStorage) { 
 
     const json = JSON.parse(infoFromStorage); 
 
     const tbody = document.querySelector('#t tbody'); 
 
     for(let i = 0; i < json.col1.length; ++i) { 
 
      const tr = document.createElement('tr'); 
 
      tr.appendChild(makeTd(json.col1[i])); // note, column names must match with that one in addToStorage 
 
      tr.appendChild(makeTd(json.col2[i])); 
 
      tbody.appendChild(tr); 
 
     } 
 
    } 
 
    else { 
 
    console.log('not present in storage. Find a tactic to handle this'); 
 
    } 
 
} 
 

 

 

 
document.getElementById('add').addEventListener('click', addToStorage); 
 
document.getElementById('clear').addEventListener('click', clearTable); 
 
document.getElementById('get').addEventListener('click', getFromStorage);

<button id="add">Add to storage</button> 
 
<button id="clear">Clear</button> 
 
<button id="get">Get from storage</button> 
 
<table id="t"> 
 
    <thead> 
 
    <tr> 
 
     <th>col1</th> 
 
     <th>col2</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>foo_1</td> 
 
     <td>foo_2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>bar_1</td> 
 
     <td>bar_2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>lorum</td> 
 
     <td>ipsum</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

有2種方式。首先，您可以在創建表格時將數據保存在服務器中，並在頁面重新加載後獲取它們。或者你可以使用localStorage用於存儲的東西。]

if (typeof(Storage) !== "undefined") { 
    // Code for localStorage/sessionStorage. 
} else { 
    // Sorry! No Web Storage support.. 
    //if not support storage I think you can append the data to the url, and parse the url after page reload 
} 

Answer 3

您可以使用HTML5的localStorage保存表數據臨時和讀回的頁面刷新。

Answer 4

您可以使用localStorage.setItem（）

localStorage.setItem(name,"harsh"); 
localStorage.setItem(gender,"male"); 
localStorage.setItem(age,"24");