Passing multiple amount of data row to table on next page

Question

How do I pass all the table data on the 1st page to another table on the 2nd page by using a button click. I've heard that we could use localstorage to do this. However, I'm not sure how to use it for an unfixed amount of data. Unfixed means that the user can choose how many items he wants to add to the table. I am new to javascript and need some guidance. You should know I am not using any server side. Thanks in advance.

1st Page

HTML

<div class="item active">
<img src="item/dapur.png" class="img-responsive" style="height:120px;">
<input class="input-display itemname" type="text" id="itemname" value="Light" readonly>
<b><input class="input-display itemprice" type="text" id="itemprice" value="30" readonly></b>
<input class="form-control quantity" type="number" id="quantity">
<button class="btn default"  onclick="addHtmlTableRow(this);">Donate</button>
</div>

<div class="item">
<img src="item/dapur.png" class="img-responsive" style="height:120px;">
<input class="input-display itemname" type="text" id="itemname" value="Water" readonly>
<b><input class="input-display itemprice" type="text" id="itemprice" value="10" readonly></b>
<input class="form-control quantity" type="number" id="quantity">
<button class="btn default"  onclick="addHtmlTableRow(this);">Donate</button>
</div>

<div class="item">
<img src="item/dapur.png" class="img-responsive" style="height:120px;">
<input class="input-display itemname" type="text" id="itemname" value="Bulb" readonly>
<b><input class="input-display itemprice" type="text" id="itemprice" value="12" readonly></b>
<input class="form-control quantity" type="number" id="quantity">
<button class="btn default" onclick="addHtmlTableRow(this);">Donate</button>
</div>


<table class="table" id="table">
<thead>
<tr>
  <th>Item</th>
  <th>Quantity</th>
  <th>Price per unit</th>
  <th>Total price Item</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="totaldonation"></div>
<button>Transfer data to next page table</button>

JS

var totaldonation = 0;

function addHtmlTableRow(ele) {
var newRow = table.insertRow(table.length);

var elitem = ele.closest('.item');
var quantity = elitem.querySelector(".quantity").value;
var itemprice = elitem.querySelector(".itemprice").value;
var totalprice = itemprice * quantity;

addCell(newRow, 0, elitem.querySelector('.itemname').value);
addCell(newRow, 1, quantity);
addCell(newRow, 2, itemprice);
addCell(newRow, 3, totalprice);

totaldonation = totaldonation + totalprice;
document.getElementById("totaldonation").innerHTML = totaldonation;
}

function addCell(row, index, value) {
row.insertCell(index).innerHTML = value;;
}

2nd Page

<table class="table" id="table">
<thead>
<tr>
  <th>Item</th>
  <th>Quantity</th>
  <th>Price per unit</th>
  <th>Total price Item</th>
</tr>
</thead>
<tbody>
</tbody>
</table>