Tabela Localstorage

by thvinic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8">
    <title>sum price</title>
  </head>
  <body onload="carregar()">
    <input type="text" id="product_name" placeholder="nome">
    <input type="text" id="item" placeholder="descricao">
        <input type="text" id="product_price" placeholder="Valor R$">


    <input type="button" id="add" value="adicionar">
    <input type="button" id="clear" value="limpar">
  <div class="form">
  <section onkeyup="salvando()" id="content" contenteditable="true">
    <table>
      <thead>
        <tr>
          <th>Item</th>
          <th>Descrição</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
     </section>
    </div>  
  </body>
  <div>
    <p class="sum_price">合計：0円</p>
  </div>
</html>

<button id="save">Save</button>
    <button id="load">Load</button>

CSS

body {
  font-family: 'Helvetica', 'Arial', sans-serif;
  width: 450px;
  margin: 0 auto;
  padding: 20px;
}

table, input {
 margin: 5px;
}

input[type=text] {
 width: 120px;
}

table,tr,th,td {
  font-size: 20px;
  width: 70%;
  list-style-type: none;
  border-radius: 3px;
  border: 1px solid #000;
  padding: 5px;
}

td {
  background: #eeeff0;
  padding-left: 15px;
}

JavaScript

$(function(){
  const PRODUCT_LIST = "product_list";

  /********************
  共通関数
  ********************/
  function saveLocalstorage(name, data){
    if(isBlank(name) || isBlank(data)) {
      alert("error!!");
      return false;
    }

    //★既存のローカルストレージの値を取得
    var mainArray    = [];
    var localStJSON = getLocalstorage(name);
    if(localStJSON != null && localStJSON != "") {
      // ★JSON形式から連想配列に変換
      var mainArray = JSON.parse(localStJSON);
    }

    //連想配列のチェック
    if($.isPlainObject(data)) {
      mainArray.push(data);
    } else {
      alert("登録するデータ形式がエラーです。m(_ _ )m");
      return false;
    }
    
    // ★連想配列からJSON形式に変換
    var mainJSON = JSON.stringify(mainArray);

    // ★ローカルストレージに新規保存or上書き
    localStorage.setItem(name, mainJSON);
    return true;
  }
  
  function removeLocalStorage(name){
    if(isBlank(name)) {
      alert("error!!");
      return false;
    }
    // ★ローカルストレージから削除
    localStorage.removeItem(name);
  }
  
  function removeLocalStorageAll(){
    // ★ローカルストレージをすべてクリア
    localStorage.clear();
  }

  function getLocalstorage(name){
    if(isBlank(name)) return;
    return localStorage.getItem(name);
  }

  // テーブルを自動生成する
  function bulidTable(){
    var tableBody = "";
    // ★ローカルストレージからデータを取得
    var localSt = getLocalstorage(PRODUCT_LIST);
    // ★JSON形式から連想配列に変換
    var localStJSON = JSON.parse(localSt);
    // TODO
    //alert(localStJSON);

    $(localStJSON).map(function(index, line){
      tableBody += "<tr>";
      tableBody +="<td class='child' contenteditable='true' class='name'>" + line ["name"] + "</td>";
      tableBody +="<td class='item'>" + line["item"] + "</td>";
            tableBody += "<td class='price'>" + line["price"] + "</td>";

      tableBody += "</tr>";
    });
    // ★テーブルを生成
    $('table tbody').append(tableBody);
  }

  function sum(){
    // 表の金額を取得する(tdの奇数列を取得)
    var pricelist = $("table td[class=price]").map(function(index, val){
      var price = parseInt($(val).text());
     ...