[jQuery]LocalStorageを使ってテーブルに追加したレコードを保存するサンプル
-
カテゴリ：
- JavaScript
-
タグ：
- #jQuery
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
