I need help figuring out how to save product and price information to local storage when an "add to cart" button is pressed. Can someone provide guidance on how to do this?
Here is the code I currently have:
body>
<!-- Header-->
<div id="header">
<button type="button" class="button">Basket</button>
</div>
<!-- CSV FILE DATA WILL APPEAR HERE-->
<div class="container">
<div class="table-responsive">
<div id="order_list" onload="appendRow()"><p id="tableintro"> Choose your desired supermarket</p>
</div>
</div>
</div>
<!--THIS BUTTON WILL LOAD DATA FROM CSV FILE-->
<div id="sidebar">
<div align="center">
<button type="button" name="load_data" id="load_tesco" class="btn btn-info">Tesco Brent Cross</button>
</div>
<div align="center">
<!-- Saving to local storage - dont work -->
<script>
function SaveItem() {
var name = document.parentNode.value;
var data = document.parentNode.value;
localStorage.setItem(name, data);
}
</script>
<script>
$(document).ready(function(){
$('#load_tesco').click(function(){
$.ajax({
url:"Tesco.csv",
dataType:"text",
success:function(data)
{
var tesco_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<tesco_data.length; count++)
{
var cell_data = tesco_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
table_data += '<div class="12at"><td>'+cell_data[cell_count]+'</td></div>';
}
}
table_data += '<td id="lastrow"><button onclick="SaveItem()">Add</button class="addb"></td>';
}
table_data += '</table>';
$('#order_list').html(table_data);
}
});
});
});
</script>