ローカルストレージの概念の概要

[HTTP] HTTPS , Cache, Cookie, Proxy
報告内容にCookieの概念を整理した.
Webstorageにも簡単に言及しました.
ToDoListを作成する過程で、ローカルストレージにデータを格納する方法を直接学びます.

関連反応項目:https://github.com/naturalMin/to-do-list2

関連JSプロジェクト:https://github.com/naturalMin/jm_study/blob/main/vanila_js/script/todolist.js2

再度,localStorageに対する理解を強固にするためには,その概念を整理する必要がある.

ローカルストレージの定義

まず、localStorageはWeb Storage APIの1つです.
Web Storage APIブラウザのキー/値ペアをCookie(EN-US)と比較
MDNドキュメントでは、より直感的なストレージ方法を提供することを示しています.
https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API
Cookieと比べると、そのメリットは

はストレージ容量が大きい.(最高5 MB)

有効期間記憶データがありません.

JavaScriptを使用するか、ブラウザキャッシュまたはローカルストレージデータをクリアしてこそ、消失します.

LocalStorageブラウザの確認

開発者モードF 12をクリックし、「アプリケーション」タブをクリックします.

の左側から、ストレージ・アイテム-ローカル・ストレージが表示されます.
サブエンティティに対応するhttpプロトコルをクリックすると、サイトに格納されているデータが表示されます.
私ならグーグルモメントンで確認しました.

localStorageの例

add data

localStorage.setItem(keyname, keyValue);

localStorageは、保存時にキー値と対応するデータ値を格納します.

Parameters

keyName
A DOMString containing the name of the key you want to create/update.
keyValue
A DOMString containing the value you want to give the key you are creating/updating.
注意:setitem()に関連するMDN
私のJSとReactの例では、通常は平らです.
keyvalue部分のJSON.stringgify()を用い,string化して運用する.
JSON.stringify()に関連するMDN

read data

localStorage.getItem(keyname);

delete data

localStorage.removeItem(keyname);

delete all data

localStorage.clear();

私が練習した例では、アレイからターゲットデータのみをフィルタして削除します.
setItem方式で更新され、削除された新しい配置が実現されました.
注意:LocalStorage MDN
Window.localStorage