個人学習用

参考
誰も教えてくれないブラウザのローカルストレージ【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の特徴

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

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

Cookie

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

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

セッション管理

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

例：Youtube

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

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

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