localStorage、DBに登録する場合

ローカルストレージとは

webブラウザ(ローカル)にデータを保存できる。
ブラウザを閉じても、削除しない限り半永久的に保存される。似たものに、sessionStorageがあるが、保存期限に違いがある。

以下が基本で、関数にまとめてやると使い勝手が良くなる。
書き込んだ後はkeyでやり取りする感じ。

ローカルストレージに書き込む

localStorage.setItem(key, value);

ローカルストレージから読み込む(取得)

localStorage.getItem(key);

ローカルストレージから削除(個別削除の場合)

localStorage.removeItem(key);

JSONを扱う場合

var hoge = {
  test1 : {
    hogehoge : "testだよ",
  }
}
var setjson = JSON.stringify(hoge);//JSON 文字列に変換
localStorage.setItem("hoge_test", setjson);

var obj = JSON.parse(setjson);//変換前に戻す

ローカルストレージのデータをDBに登録するとき

formに入れ直しても良いが、それだと面倒だということで、JSで直接入れてsubmitしてやる。

let myForm = document.getElementById('myForm');
let formData = new FormData(myForm);
formData.append('username', 'Chris');

ボタンクリック時に発火する。
htmlに、id="myForm"を予め設定。
actionでsubmit時の遷移先を指定。
methodで、POST（GET）。
formfdataイベントを発火させて、値をセットした後でsubmit。
これでサーバーサイドにデータを送れるので、後はinsertしてやれば良い。
API叩くなら、そこに引数を渡してやる。

let myForm = document.getElementById('myForm');//対象のformを指定
var fd = e.formData;//submit直前に発火するformdataイベント
fd.set("hoge",1);
myForm.submit();

参照

・Window.localStorage
・JSON.stringify()
・JSON.parse()
・FormData()
・JavaScript オンリーで動的に form タグを作ってデータを送信する方法
・JavaScriptのFormDataの使い方