はじめに
jQueryで簡単なラベル印刷の帳票出力のフォームをサーバーレスで作っています。印刷は、GoogleChromeの印刷機能を使います。ラベルの入力画面で送信ボタンを押すと、toggleで入力画面が、display:none; 出力画面がdisplay:blockで現れるプログラムを作っていたのですが、リロードでページ再読み込みするとJavaScriptなので、普通は、入力内容が保持されず消えてしまいます。それをChromeのLocalStorageで保存した内容をリロードされても表示を残したままにするコードを載せて行きます。
環境情報
| 環境 | Version |
|---|---|
| jQuery | 3.3.1 |
| Bootstrap | 4.1.1 |
| Paper.css | 0.4.1 |
| Garlic.js | 1.2.2 |
LocalStorageとは
簡単に説明すると、WEBブラウザ上に10MB程、WebStorageというメモリ空間があります。
その中に、LocalStorageと、SessionStorageというものがあり、今回は前者のLocalStorage
を使用して、簡単なJSONデータを保存して取得する方法を記します。
LocalStorageは、Cookieと違いデータの保存期間に制限がなく半永久保存できます。
LocalStorageと、SessionStorageには各5MBずつ保存できるようになっています。
以下詳しいリンク。
LocalStorage（ローカルストレージ）とは？使い方をサンプル付きで丁寧に説明
jQueryでLocalStorageの保存・取得方法
ラベル入力フォームの一部です。
<div class="row">
<div class="vertical p-0 m-0">
<h2 class="vertical">ベジタブル</h2>
</div>
<div class="col-5 p-0 m-0">
<textarea id="target-vege-full" name="target-vege-full" rows="21" cols="88" placeholder="ベジタブルフルの食品栄養表示を入力してください"></textarea>
</div>
<div>
<input id="target-vege-full-count" name="target-vege-full-count" class="border" /><span style="font-size: 13px;">枚</span>
</div>
<div class="col-5 p-0 m-0">
<textarea id="target-vege-half" name="target-vege-half" rows="21" cols="88" placeholder="ベジタブルハーフの食品栄養表示を入力してください"></textarea>
</div>
<div>
<input id="target-vege-half-count" name="target-vege-half-count" class="border" /><span style="font-size: 13px;">枚</span>
</div>
</div>
<div class="row">
<div class="vertical p-0 m-0"></div>
<textarea id="vege-full-expiration-date" name="vege-full-expiration-date" rows="3" cols="24" placeholder="ベジタブルフルの消費期限を入力してください"></textarea>
<textarea id="vege-half-expiration-date" name="vege-half-expiration-date" rows="3" cols="24" placeholder="ベジタブルハーフの消費期限を入力してください"></textarea>
<textarea id="chicken-full-expiration-date" name="chicken-full-expiration-date" rows="3" cols="24" placeholder="バジルチキンフルの消費期限を入力してください"></textarea>
<textarea id="chicken-half-expiration-date" name="chicken-half-expiration-date" rows="3" cols="24" placeholder="バジルチキンハーフの消費期限を入力してください"></textarea>
<textarea id="pork-full-expiration-date" name="pork-full-expiration-date" rows="3" cols="24" placeholder="ローストポークフルの消費期限を入力してください"></textarea>
<textarea id="pork-half-expiration-date" name="pork-half-expiration-date" rows="3" cols="24" placeholder="ローストポークハーフの消費期限を入力してください"></textarea>
<textarea id="beef-full-expiration-date" name="beef-full-expiration-date" rows="3" cols="24" placeholder="ローストビーフフルの消費期限を入力してください"></textarea>
</div>
$(function() {
$(document).on("click", ".toggle-btn", function(e) {
// JSObject化
var outputLabels_vf = {
body_vf : $("#target-vege-full").val(),
count_vf : parseInt($("#target-vege-full-count").val()),
expired_vf : $("#vege-full-expiration-date").val(),
};
var outputLabels_vh = {
body_vh : $("#target-vege-half").val(),
count_vh : parseInt($("#target-vege-half-count").val()),
expired_vh : $("#vege-half-expiration-date").val(),
};
// 複数のデータをJSON化
var outputLabels_vf = JSON.stringify(outputLabels_vf);
var outputLabels_vh = JSON.stringify(outputLabels_vh);
// localStorageに保存
localStorage.setItem("vegeFull", outputLabels_vf);
localStorage.setItem("vegeHalf", outputLabels_vh);
// localStorageに保存されているものをJSObjectに戻して取得
var jsDataOutput_vf = JSON.parse(localStorage.getItem("vegeFull"));
var jsDataOutput_vh = JSON.parse(localStorage.getItem("vegeHalf"));
// 以下省略
});
});
JSON.stringify();
でJSON化することによって、複数の項目をまとめてデータとして渡せます。
localStorage.setItem("key", value);
でローカルストレージに保存します。
JSON.parse(localStorage.getItem("key");
でローカルストレージに保存したJSONをJSObjectに変換します。
この時、私の環境での挙動ですが、
localStorage.setItem("key", value);
var JSONobject = localStorage.getItem("key");
JSON.parse(JSONobject);
としても動かなかったです。ちょっとこれについては、原因が分からないので
分かる方がいたら、コメントで教えていただきたいです。
ラベル出力画面
印刷画面
jQueryプラグイン Garlic.jsで入力内容保持とLocalStorageの保存と取得
フォームの入力内容を保存してくれる「Garlic.js」は便利なプラグイン
Garlic.jsは、formタグに method="post" data-persist="garlic"
を入れて、localStorageを保存したい場所に name=""を入れるだけで nameに指定したキーのlocalStorageが作成されます。入力内容保持もその一貫でやってくれます。超便利でした。
終わりに
私も調べながら作っていたので、オリジナルの部分はないです。ほとんど参考リンクの記事を読めば完結してしまうくらい、いい記事に出会えたので載せました。私の学習の中で引っかかったポイントや、オススメのプラグインの紹介の方に価値があると思っています。