質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
ストレージ

ストレージとは、データを長期で保管・保存しておくための記憶装置。ハードディスクやDVD、CDなどが主なストレージとして挙げられます。PCでは作成データの他、OSやアプリケーションがインストールされています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

822閲覧

ローカルストレージからの呼び出し

tokio-k

総合スコア11

ストレージ

ストレージとは、データを長期で保管・保存しておくための記憶装置。ハードディスクやDVD、CDなどが主なストレージとして挙げられます。PCでは作成データの他、OSやアプリケーションがインストールされています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/10/29 14:48

編集2019/10/30 05:06

todolistを作ろうとしています。
大体形になってきて、最後に、データを保持できるようにしようとしているのですが、うまくいきません。

html

1<ul id="todolist-a" class="todolist"> 2 <!-- todolistを追加 --> 3 </ul>

この<ul></ul>の中に<li>要素としてリストを追加していきます。
todoリストが追加、削除されたときに、子要素li(todoリスト)をすべてローカルストレージに保存したいです。
そしてリロードしても消えない状態にしたいです。
そのためにこのように書きました。

javascript

1let targeta = document.getElementById('todolist-a'); 2function example(){ 3 let dataa = document.getElementById("todolist-a"); 4 localStorage.setItem('key',dataa); 5} 6let moa = new MutationObserver(example); 7moa.observe(targeta,{childList: true}); 8 9let datada = localStorage.getItem('key'); 10console.log(datada);

ですがこれでコンソールに出てくるのは
[object HTMLUListElement]
という文字です。

**追記**
これは文字列ではないからということがわかりました。

保存できたら、window.onLoadで開いたときに保存されているデータを<ul></ul>の中にいれておきたいです。

<ul> <li><p>◉</p>文字列<i class="far fa-trash-alt gomi"></i></li> </ul>

こんな感じで<ul>の中にどんどん追加されていきます

<p></p>の中のマーク(記号)もクリックで変更します。その変更も一緒にセットで保存したいです。 配列としてローカルストレージに保存するということは分かったのですが、配列に追加ができません。また、タスクとマークをセットにすることもできません。 どうしたらうまくいくのでしょうか

***追記***

javascript

1 var datalocaltask = []; 2 var datalocalmark = []; 3 datalocaltask.unshift(newTask); 4 datalocalmark.unshift(lists.querySelector('p').innerText); 5 localStorage.setItem('key',JSON.stringify(datalocaltask)); 6 localStorage.setItem('keys',JSON.stringify(datalocalmark)); 7 console.log(JSON.parse(localStorage.getItem("key"))); 8 console.log(JSON.parse(localStorage.getItem("keys")));

としています。
pushなどは調べてやっていたのですが、配列にならなくて困っています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

これはどういうことなのでしょうか。

Document.getElementById()の返り値である Element オブジェクトをそのまま保存しているためです。

Elementをそのまま持っておくよりもTODOListなのであれば、その内容(HTMLではなく本当にTODOの内容、データだけ)だけ保存するのが良いでしょう。
配列にしてJSON.stringify()でlocalstorageに保存
localstorageから取り出してJSON.parse()で配列に戻してJavaScriptでHTML構築し、追記・編集・削除などを行ってまた保存する際にJSON.stringify() の繰り返し。

投稿2019/10/29 15:01

編集2019/10/29 15:05
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tokio-k

2019/10/29 15:05

localstrageには文字列しか保存できないと言うことですか? <li><順位のマーク>文字列(タスク)<ごみマーク></li>となっているのですが、どのようにしたらいいのでしょうか? どこで配列にするのでしょうか?
tokio-k

2019/10/29 15:08

取り出すとき、どのように取り出すのでしょうか?要素として一つずつ作ることはできるのですか?
m.ts10806

2019/10/29 15:28

むしろどのようにtodoデータを保存できてるのでしょう。そこからです。
tokio-k

2019/10/30 00:01 編集

let plusa=document.getElementById("plus-a"); plusa.addEventListener('click',function(){ let newTask = document.getElementById("WantToAdda").value; let lists = document.getElementById("todolist-a"); if(newTask!=""){ lists.insertAdjacentHTML("afterbegin","<li><p>◉</p>"+newTask+"<i class='far fa-trash-alt gomi'></i></li>"); // ローカルストレージ let savelist = JSON.stringify(newTask); localStorage.setItem('key',savelist); このようにしてます。 <ul> <li><p>◉</p>文字列<i class="far fa-trash-alt gomi"></i></li> </ul> こんな感じで<ul>の中にどんどん追加されていきます <p></p>の中のマークもクリックで変更します。その変更も一緒にセットで保存したいです。
m.ts10806

2019/10/29 23:39

質問は編集できますので。 まずは提示のコードの変数であるnewTaskのみを私の回答にあるようにjson形式で追記する形になるようにLocalstorageに溜め込んでいってみてください。
tokio-k

2019/10/30 00:07 編集

ため込めるようにできないです。 一つに更新されてしまいます。 この方法でマークを関連付けるにはどうしたらいいのでしょうか
m.ts10806

2019/10/30 00:15

ですから、配列に追記する形と書いています。仰っている「マーク」がなんのことかわかりませんけど… 質問本文に要件をきちんと追記してください
tokio-k

2019/10/30 01:24

すみません。追加がわからないのです。 マークは上のコメントにある<p></p>の中のものです。
m.ts10806

2019/10/30 03:01

JavaScriptで配列に追加について調べてください。 「マークの関連付け」とは仰っていますが質問にはなにも触れられていません。 何度かお願いしていますが「要件を質問本文に追記して」ください。
guest

0

ベストアンサー

これはどういうことなのでしょうか。

setItem() の型があわなかったので、暗黙の型変換(文字列化)が発生しています。
ul要素は HTMLUListElement オブジェクトなので [object HTMLUListElement] になります。

どうしたら、うまくデータを保存することができますか

  1. UL要素の全子要素から、意図したテキスト等を抽出する。
  2. テキストと、マークを含めた配列を作って JSONの配列(何もないなら[])を作成する。
  3. localStorage.setItem() で配列をJSON形式の文字列にして保存する。

window.onLoadで開いたときに保存されているデータを<ul></ul>の中にいれておきたい

  1. onLoad で localStorage.getItem() を使い、保存していたJSONを配列にする。
  2. 配列のデータを1件ずつ任意の構造のLI要素を作成しつつ、UL要素に appendChild()

やるべきことは、こんな感じです。


追記)
配列の要素には、必要なプロパティを持ったオブジェクトを辞書形式データにして格納する例

javascript

1// localStorage に保存する配列(Array)のイメージ 2var items = [ 3 { text:"TODO項目1", mark: true }, // 重要の印をつける 4 { text:"TODO項目2", mark: false } // 重要の印をつけない 5: 6]; 7 8// 配列の要素(1件のTODO情報) 9var item = { text:"TODO項目N", mark: "重要度の印?" }; 10 11item.push( item ); // push() や unshift() が追加 / pop() や shift() が取り出し。

JavaScriptでTodoリストを作ろう! では、TODO項目のみを扱った事例で localStorage の機能確認をされています。
(リンク先では見栄えのために外部のファイルを読んでいますが、処理の仕組みはHTML,JavaScriptだけ実現できます)

投稿2019/10/30 02:41

編集2019/10/30 04:35
AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tokio-k

2019/10/30 04:12

返信ありがとうございます。 テキストとマークをセットで配列に入れることと、配列に追加していくことができません。
tokio-k

2019/10/30 04:41 編集

pushでやっているのですが、こんそーるにひょうじしてみると、1つになっています。 また、マークはクリックで四択で変わるやつなのですが、どのように入れたらいいのですか? そのtodoアプリの解説のページを何回も読んだのですが、よくわかりませんでした。
AkitoshiManabe

2019/10/30 04:42

Array#push() を回答しなければならない人を相手にするってのは正直言って「有償」の事案です。必ず、ググって調べましょう。自分自身でうまく行かない理由を探してみましょう。
AkitoshiManabe

2019/10/30 04:45

言葉がキツすぎましたね。私もGoogle先生は「関数の役割」とか「専門用語の意味」とか教えてくれる!とググりまくってました。もう少し頑張ってみましょう。
tokio-k

2019/10/30 05:09

なかなかうまく調べれなくて、頼ってしまいすみません どこ調べても普通の配列の作り方しかいてなく、ほとんどどのページも同じことを言っていてなかなかうまくいきませんでした。
AkitoshiManabe

2019/10/30 09:57

四択なら数字か文字列がシンプルです。 よくわかりませんと仰ってますが、書かれているコード内の関数の働き「全て」を理解しなければ、真似(コピペ)はできてもアレンジはできないでしょう。他者のコードを読んで、その人が処理をどう組み立てているのか理解できるようになるのが先です。 私の追加のコードにも typo があります。こういうのを見つけられるようになることが、ご自身のやりたいことを実現する近道です。 まずは仕様を徹底的に確認しましょう。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問