あとtypescriptといいつつ完全にjavascriptです。
localStorage, sessionStroageの解説
- sessionStroage ブラウザを閉じたら消える
- localStorage 半永久的
- 5Mバイトまで
- Chromeならデベロッパーツール → LocalStorageで確認・追加・編集・削除が可能
- 自由にアクセス出来ることに留意すること
- チョー簡単(ゆえに煩雑になりやすい)
- 重い
- テキストデータの保存などに向いてそう
localStorage, sessionStroageサンプル
HTML
1 2 3 | <textarea id="textarea" rows="4" cols="20">test</textarea><input type="button" onclick="save()" value="save" /><input type="button" onclick="load()" value="load" /> |
JavaScript
1 2 3 4 5 6 7 8 9 10 | 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(); // 全削除} |
saveボタンでtextarea内のテキストが保存され、
loadボタンで保存したデータがtextareaに書きだされます。
indexedDBの解説
- 何も制限なく使えるのは5M程度
- ポップアップなどは表示されるが50M程度は使える
- 検索などができる
- indexが貼れる
- データ件数が多い時などに使う
- 難易度はそこそこ
基本的にずっと残るのでどこかしらで削除処理を入れたほうが親切かもしれないです。
indexedDBはちょっとボリュームがあるので後でまとめます。
