webアプリでローカルにデータを保存する方法まとめ(javascript,typescript)

Web SQLはもう非推奨なので取り扱いません。
あとtypescriptといいつつ完全にjavascriptです。

---

localStorage, sessionStroageの解説

---

• sessionStroage ブラウザを閉じたら消える
• localStorage 半永久的
• 5Mバイトまで
• Chromeならデベロッパーツール → LocalStorageで確認・追加・編集・削除が可能
• 自由にアクセス出来ることに留意すること
• チョー簡単(ゆえに煩雑になりやすい)
• 重い
• テキストデータの保存などに向いてそう

---

localStorage, sessionStroageサンプル

---

HTML

<textarea id="textarea" rows="4" cols="20">test</textarea>
<input type="button" onclick="save()" value="save" />
<input type="button" onclick="load()" value="load" />

JavaScript

function save() {
    localStorage.editData = document.getElementById("textarea").value;
}
function load() {
    document.getElementById("textarea").value = localStorage.editData;
}
function del() { // delete()もclear()も使えない
    localStorage.removeItem("editData");
    // localStorage.clear(); // 全削除
}

test


saveボタンでtextarea内のテキストが保存され、
loadボタンで保存したデータがtextareaに書きだされます。

---

indexedDBの解説

---

• 何も制限なく使えるのは5M程度
• ポップアップなどは表示されるが50M程度は使える
• 検索などができる
• indexが貼れる
• データ件数が多い時などに使う
• 難易度はそこそこ

http://uhyohyo.net/javascript/14_2.htmlがとっても詳しくていい感じ

基本的にずっと残るのでどこかしらで削除処理を入れたほうが親切かもしれないです。
indexedDBはちょっとボリュームがあるので後でまとめます。