![見出し画像](https://assets.st-note.com/production/uploads/images/76455999/rectangle_large_type_2_aa27ca0fe45cdb47ad429a23aaf674af.png?width=1200)
やっぱり。JavaScript!- ToDoリスト - 3
保存する仕組みを作っていきます。リロードしても消えないようにします。ブラウザに保存する方法については
localStorageは、cookieのようにデータをブラウザで永続的に保存できる仕組みで、データは、キー(key)と値(value)の組み合わせで保存されます。
基本はKey,valueをワンセットで保存します。
localStorage.setItem(key, value);
データの取り出しは
localStorage.getItem(key);
keyを指定して取り出します。
今回は複数のデータをまとめて、オブジェクトとして1つのキー(key)に配列として保存します。配列を保存するには下が必要になります。
データを保存する前に、文字列に一旦変換する必要があります。
JSON形式のデータを文字列に変換するために、JSON.stringify()メソッドを利用します。
localStorage.setItem("todos", JSON.stringify(todos));
JSON形式での保存となります。JSONについては
保存方法はこんな感じで保存が可能ですがコードに落としていきます。
function saveData() {
// 処理
}
というような関数を作ります。実際の処理はまず、追加していくリストを取得しないといけないので、
const lists = document.querySelectorAll("li");
としてHTMLから"li"部分を抜き出し配列"lists"に内容を代入します。
そして、さらに保存する文字を抜き出して保存するデータを入れる配列を作り、
const todos = [];
繰り返しループを使って配列"todos"に配列"lists"のデータを追加していきます。forEach()で繰り返し処理をして一つずつ"lists"のデータを取り出し、push()という命令を使ってリストの内容(li.innnerText)を追加します。
lists.forEach((li) => {
todos.push({text:li.innerText});
});
最後にlocalStorageに保存します。
localStorage.setItem("todos", JSON.stringify(todos));
関数全体は以下となります。
function saveData() {
const lists = document.querySelectorAll("li");
const todos = [];
lists.forEach((li) => {
todos.push({text:li.innerText});
});
localStorage.setItem("todos", JSON.stringify(todos));
}
この関数をリストを追加する関数add()の一番下に入れて、リストを追加すると同時に保存します。
function add(){
let todoText = input.value;
if (todoText) {
const li = document.createElement("li");
li.innerText = todoText;
li.classList.add('list-group-item')
ul.appendChild(li);
input.value = "";
saveData()
}
}
仕組みとしては保存の仕組みはできました。この保存したデータを画面に表示させる仕組みを作っていきます。
この記事が気に入ったらサポートをしてみませんか?