はじめに

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」は便利なプラグイン

Garlic.jsは、formタグに method="post" data-persist="garlic"
を入れて、localStorageを保存したい場所に name=""を入れるだけで nameに指定したキーのlocalStorageが作成されます。入力内容保持もその一貫でやってくれます。超便利でした。

終わりに

私も調べながら作っていたので、オリジナルの部分はないです。ほとんど参考リンクの記事を読めば完結してしまうくらい、いい記事に出会えたので載せました。私の学習の中で引っかかったポイントや、オススメのプラグインの紹介の方に価値があると思っています。

参考リンク