jQueryでのLocalStorageとGarlic.jsのExample Code(入力内容保持)

# はじめに
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（ローカルストレージ）とは？使い方をサンプル付きで丁寧に説明](http://webliker.info/how-to-use-localstrage/)

# jQueryでLocalStorageの保存・取得方法
ラベル入力フォームの一部です。
<img width="1346" alt="スクリーンショット 2018-07-27 11.36.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/173550/18239d2a-93cd-3bc0-03af-ce0039be812a.png">

<img width="1346" alt="スクリーンショット 2018-07-27 11.36.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/173550/3cd1e4db-c80f-88f6-7b5e-5083522f2652.png">


```HTML
<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>
```

```javascript
  $(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に変換します。
この時、私の環境での挙動ですが、

```javascript
localStorage.setItem("key", value);
var JSONobject = localStorage.getItem("key");
JSON.parse(JSONobject);
```
としても動かなかったです。ちょっとこれについては、原因が分からないので
分かる方がいたら、コメントで教えていただきたいです。

ラベル出力画面
<img width="1074" alt="スクリーンショット 2018-07-27 11.46.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/173550/75d81822-ac74-d478-edfb-80a594e37239.png">

印刷画面
<img width="1000" alt="スクリーンショット 2018-07-27 11.48.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/173550/c649d1b1-5076-f406-ffbc-3b086649bf1c.png">

# jQueryプラグイン Garlic.jsで入力内容保持とLocalStorageの保存と取得

[公式Garlic.js](http://garlicjs.org/)

[フォームの入力内容を保存してくれる「Garlic.js」は便利なプラグイン](https://www.telln.com/lesson/2016/01/16/garicjs/)

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

<img width="1347" alt="スクリーンショット 2018-07-27 12.32.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/173550/d647620d-7f21-5026-bf18-07198c76f130.png">

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

# 参考リンク
[LocalStorage（ローカルストレージ）とは？使い方をサンプル付きで丁寧に説明](http://webliker.info/how-to-use-localstrage/)

[公式Garlic.js](http://garlicjs.org/)
[フォームの入力内容を保存してくれる「Garlic.js」は便利なプラグイン](https://www.telln.com/lesson/2016/01/16/garicjs/)