LocalStorageを使用したダブルリストの作成

タラン～2日間の成果
今は試用期間なので、すぐに仕事に打ち込めない段階です...
1つ目の課題は、フロントを準備している人が聞いたことのある投票リストを作成することです.
でも私は...一度もやったことがない
ハハハ(こんな私を我慢してください)
だから会社で一人で勉強して、ぼんやりした記憶と検索で創造しました.
勉强したら、二日もかかりません.地...?
設計案は射手が設計したレイアウトに基づいて作られた.
プロセス.
html、css設計>昼間、夜間モードの追加>待機事項の追加時にローカルストレージに保存>詳細UXの変更
スキルは射手が教えてくれたので、少し増えました.

enterを押しても、いくつかの作業が追加されます.

プレースホルダでは、1つのルーチンのリストでもUXに配置されます.

テキストを入力せずに追加した場合は、プレースホルダに追加されます.

は、プレースホルダの値を変更するために、やるべきことをリフレッシュまたは入力します.

は、重複する待機事項を入力する際の機能(alertで代用)

を追加した.

ローカルストレージを使用すると、ウィンドウが閉じても入力した情報は保存されます.
めまいがする.初めて使う機能です.△今まで何を勉強しましたか.

ローカルストレージ

Webストレージ、クライアントに情報を格納ためのリポジトリ

.

ユーザーが直接消去しない限り、永続的に保存されます.

キーと値をペアで格納できます.

値を保存する場合は、直接保存するのではなく、オブジェクトの値をテキストに変換して保存したほうがいいです.フォーマットのコピーを保存しない場合は、完全な値が保存されていない場合に発生する可能性があります.

JSON.stringfy(저장할 값)

こんなふうに!
逆に、値を入力するときは、テキストを再グループ化してインポートする必要がありますよね?

JSON.parse(가져올 값)

JSONは文字ベースのフォーマットです.軽量なデータ交換方式.
キー-値ペアで構成されています!
stringfyはオブジェクトを文字列に変換し、parseは文字列をオブジェクトに変換します.
ローカルストレージの使用状況を書いて、作業を注意します.

//로컬 스토리지에 무언가 저장할 땐
localStorage.setItem("키","값");

//로컬 스토리지의 값을 가져올 땐
localStorage.getItem("키");

//특정 키에 해당하는 값을 삭제하고 싶다면
localStorage.removeItem("키");

//전체 삭제
localStorage.clear();

このほかにも、まず2つのリストを作成するときに使用する関数があります.
反省点があります.
2つのリストを作成するときに致命的です...もしあなたが間違いを見つけたら
やるべきことをすべてキーと値を付けて...

致命的......私を習うな...
キーは配列のインデックスで、値を一つ一つ入れて...
普通です.

key: todo,
value : [{todo: "할일1", clear: false},{todo: "할일2", clear: false},{...}]

たぶんこのように貯蔵されています.
私のようにすると、画面にリストを表示したり削除したりする過程も複雑になります.
その後、昼夜モードをローカルに保存しようとしても、ローカルを読み込むときにエラーが発生します...
修理なら、えーと、どうしても方法が見つかりますが、もっと複雑になります.
輝度モードはセッションストレージ(Session Storage)に格納され、これは二次的な選択である.

セッションストレージ

Webストレージの1つ

のローカルストレージとは異なり、セッション終了時(ブラウザを閉じる)に格納された情報は

から消える.
使用方法は、上記のローカルストレージと同じです.代わりにlocal>sessionで終わりました~

//세션 스토리지에 무언가 저장할 땐
sessionStorage.setItem("키","값");

//세션 스토리지의 값을 가져올 땐
sessionStorage.getItem("키");

//특정 키에 해당하는 값을 삭제하고 싶다면
sessionStorage.removeItem("키");

現在、そこのハブはバカのように輝度モードの修正を提出していません.
初めてなので、関数が歪んでいるところも…(見てるとみんなできるよね~ふーん…やるべきこと)
ローカルストレージの使用も非常に未熟です...
以前の授業をもう一度見てみると、この人はもっと少ないコードで30分以内に完成しました(もちろん授業で完成するので、たくさん勉強したでしょう!)
また次回は完成度を上げましょうね~