[jQuery]LocalStorageを使ってテーブルに追加したレコードを保存するサンプル

LocalStorageは自分のローカルPC上にJavascriptを使ってデータを永続的に保存する仕組みです。

前にテーブルに行を追加するサンプルをjQueryで作成しましたが、追加したレコードは一時的なものでブラウザを更新したらデータは消えてしまうものでした。

[jQuery] テーブルに行を追加+合計金額を計算するサンプル

今回はそれを応用して、LocalStorageに追加したレコードを保存して、ブラウザを更新しても半永続的にデータが保持されるサンプルを作成しました。╰(*´︶`*)╯

 

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8">
    <title>sum price</title>
  </head>
  <body>
    <input type="text" id="product_name" placeholder="商品">
    <input type="text" id="product_price" placeholder="価格">
    <input type="button" id="add" value="add">
    <input type="button" id="clear" value="clear">
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>価格</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </body>
  <div>
    <p class="sum_price">合計:0円</p>
  </div>
</html>

CSS

body {
  background-color: #a3d5d3;
  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)) retun;
    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='name'>" + line["name"] + "</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());
      if(price >= 0) {
        return price;
      } else {
        return null;
      }
    });
    // 価格の合計を求める
    var total = 0;
    pricelist.each(function(index, val){
      total = total + val;
    });
    $(".sum_price").text("合計:"+total+"円");
  }

  function isBlank(data){
    if (data.length ==0 || data == ''){
      return true;
    } else {
      return false;
    }
  }

  /********************
  各種イベント処理
  ********************/
  // addボタン押下時の処理
  $("#add").click(function(){
    var name = $("#product_name").val();
    var price = $("#product_price").val();
    $('table tbody').append('<tr><td class="name">'+ name
                      +'</td><td class="price">'+price
                      +'</td></tr>');

    //ローカルストレージに保存
    var product = {"name": name, "price":price};
    saveLocalstorage(PRODUCT_LIST, product);

    // 合計値を再計算
    sum();
  });

  // clearボタン押下時の処理
  $("#clear").click(function(){
    removeLocalStorage(PRODUCT_LIST);
    $("table tbody tr").remove();
    sum();
  });

  // テーブルの生成
  bulidTable();
  // 画面表示時に価格の合計値を計算
  sum();

});

サンプル

 

【point!!】

 localStorage.getItem("sample");:
   ローカルストレージから「sample」という名前で保存されているデータを取得する

 var mainArray = JSON.parse([JSONデータ]);:
   JSON形式の文字列を連想配列に変換する

 $.isPlainObject(data):
   dataが連想配列かどうかをチェックする。連想配列ならtrue。

 [配列A].push([配列B]);:
   配列Aに配列Bを追加する

 localStorage.setItem("sample", [文字列]);:
   ローカルストレージに「sample」という名前で文字列を保存する

 localStorage.removeItem("sample");:
   「sample」という名前のローカルストレージを削除する

 localStorage.clear();:
   ローカルストレージのすべてのデータを削除する

 var localStJSON = JSON.parse([配列]);:
   配列をJSON形式の文字列に変換する



投稿日:2019-12-01    更新日:2019-12-10

[スポンサーリンク]

関連記事
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
サイト内検索
プロフィール

プロフィール

[Name : じゃぶじゃぶ(@jbjb_2019)]
都内で社内SEをしているおじさん。
仕事で得られる知識だけでは限界を感じ、 WEBの勉強がてらITブログを開始。
サーバからWEBサイトまでフルスクラッチで開発しました。
現在は勉強のモチベーションを保つために活用中。
興味があることを雑記的に書いていきます。

[スポンサーリンク]

[スポンサードリンク]

最近の記事