LocalStorageとCookieをざっくり理解

個人学習用

参考
誰も教えてくれないブラウザのローカルストレージ【JavaScript localStorage】
Cookieとセッションってなに？ゼロからわかりやすく解説

LocalStorage

ざっくり言うとデータをブラウザで一時的に保存してくれるもの。

const inputForm = document.querySelector("#inputForm");
const saveBtn = document.querySelector("#saveBtn");

saveBtn.addEventListener("click", () => {
    const inputData = inputForm.value;
    //keyとvalueが対になる(簡単に言うとオブジェクトみたいなもん)
    localStorage.setItem("keyName", inputData(値));
});

※Storage.setItem()→キーの名称と値を渡すと、ストレージにキーを追加し、またはキーが既に存在する場合はキーに対する値を更新する。

LocalStorageどこにあるん

検証ツールのコンソールだのがある欄の右にある、>>を押す。そしてアプリケーションを押す。その中のストレージ→ローカルストレージ

LocalStorage追加以外の機能

例えば取得

const inputForm = document.querySelector("#inputForm");
const saveBtn = document.querySelector("#saveBtn");
const backBtn = document.querySelector("#backBtn");

saveBtn.addEventListener("click", () => {
    const inputData = inputForm.value;
    //keyとvalueが対になる(簡単に言うとオブジェクトみたいなもん)
    localStorage.setItem("keyName", inputData(値));
});

backBtn.addEventListener("click", () => {
    const saveData = localStorage.getItem("key");
    inputForm.value = saveData;
});
/保存したものをkey指定で取ってこれて使える/

例えば削除

const inputForm = document.querySelector("#inputForm");
const saveBtn = document.querySelector("#saveBtn");
const backBtn = document.querySelector("#backBtn");
const deleteBtn = document.querySelector("#deleteBtn");

saveBtn.addEventListener("click", () => {
    const inputData = inputForm.value;
    //keyとvalueが対になる(簡単に言うとオブジェクトみたいなもん)
    localStorage.setItem("keyName", inputData(値));
});

backBtn.addEventListener("click", () => {
    const saveData = localStorage.getItem("key");
    inputForm.value = saveData;
});

deleteBtn.addEventListener("click", () => {
    localStorage.removeItem("key");
});
/key指定で削除できる/

deleteBtn.addEventListener("click", () => {
    localStorage.clear();
});
/これで全消し/

LocalStorageの特徴

1. ブラウザを閉じても残る(ちなsessionStorageていうの使うと時間制限をかけられる)
2. 保存するデータはキーと一緒に管理する
3. 削除は手動でもできる(ユーザーが消せる)

閲覧履歴とかの、わざわざデータベースに保存するほどでもないようなものを、簡易的に保存できるよねってもの

Cookie

前提用語
ステートレス→状態を持たない。HTTPはこれ

CookieだのSessionだのは状態を保つようにするよってやつ。ログインの時とかはステートレスだと無理。

セッション管理

セッションとは一連の処理の始まりから終わり前を表す概念(例えばログインからログアウトまで)

例：Youtube

1. 自分「ログインするで」
2. Youtube「識別番号覚えといて」
   →これをCookieに保存
   Cookieとは、ブラウザにテキスト情報を保存する仕組み
3. 自分「識別番号~です。ホーム画面のHTMLください」
4. Youtube「OK」

セキュリティで気を付けておくべきこと

なりすまし
・識別番号が推測できないこと
→普通はランダムで設定する
・識別番号が漏洩しないこと