質問: []; datalocaltask.unshift(newTask); datalocalmark.unshift(lists.querySelector('p').innerText); localStorage.setItem('key',JSON.stringify(datalocaltask)); localStorage.setItem('keys',JSON.stringify(datalocalmark)); console.log(JSON.parse(localStorage.getItem("key"))); console.log(JSON.parse(localStorage.getItem("keys"))); ``` としています。 pushなどは調べてやっていたのですが、配列にならなくて困っています。
回答: > > これはどういうことなのでしょうか。 > > > setItem() の型があわなかったので、暗黙の型変換(文字列化)が発生しています。 ul要素は HTMLUListElement オブジェクトなので `[object HTMLUListElement]` になります。 > > どうしたら、うまくデータを保存することができますか > > > 1. UL要素の全子要素から、意図したテキスト等を抽出する。 2. テキストと、マークを含めた配列を作って JSONの配列(何もないなら[])を作成する。 3. localStorage.setItem() で配列をJSON形式の文字列にして保存する。 > > window.onLoadで開いたときに保存されているデータをの中にいれておきたい > > > 1. onLoad で localStorage.getItem() を使い、保存していたJSONを配列にする。 2. 配列のデータを1件ずつ任意の構造のLI要素を作成しつつ、UL要素に appendChild() やるべきことは、こんな感じです。 追記) 配列の要素には、必要なプロパティを持ったオブジェクトを辞書形式データにして格納する例 ``` // localStorage に保存する配列(Array)のイメージ var items = [ { text:"TODO項目1", mark: true }, // 重要の印をつける { text:"TODO項目2", mark: false } // 重要の印をつけない : ]; // 配列の要素(1件のTODO情報) var item = { text:"TODO項目N", mark: "重要度の印?" }; item.push( item ); // push() や unshift() が追加 / pop() や shift() が取り出し。 ``` JavaScriptでTodoリストを作ろう! では、TODO項目のみを扱った事例で localStorage の機能確認をされています。 (リンク先では見栄えのために外部のファイルを読んでいますが、処理の仕組みはHTML,JavaScriptだけ実現できます)