时间戳

首页 > 解决方案 > 将表格内的文本保存到本地存储

javascript - 将表格内的文本保存到本地存储

问题描述

我有一张表格，其中包含许多产品及其价格在不同的列中。每个产品旁边还有一个“添加到购物车”按钮。按下按钮时，只需将该行的产品和价格保存到本地存储。知道我该怎么做吗？

这就是我所拥有的

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>

标签： javascripthtmljquerycsslocal-storage

解决方案

将 cellData 作为参数传递给 SaveItem 函数（将其作为字符串传递）

在 saveItem 函数中，检查 localStoage 中是否存在键“basket”，然后将所选行的值附加到 | 分隔符 else 添加一个新条目

function SaveItem(cell_data) {
      let basket = window.localStorage.getItem('basket');
      if ( basket ) {
        basket += `|${cell_data}`;
      } else {
        basket = cell_data;
      }
      window.localStorage.setItem('basket', basket);
}

for(var count = 0; count<tesco_data.length; count++) {
        var _cellData = tesco_data[count]; 
        var cell_data = _cellData.split(",");
        table_data += '<tr>';
        for(let 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('${_cellData }')">Add</button class="addb"></td>`;
    }
    table_data += '</table>';
    $('#order_list').html(table_data);

推荐阅读