localStorageとsessionStorage

#study_record

2022.01.10

udemyの「JavaScript(ES6)/Vue.js/TypeScript フロントエンド技術入門」にてlocalStorageとsessionStorageについて学んだので、少しアレンジして実装してみた。

見た目の設定

前回のcookie同様、htmlは以下のように記述した。簡単にメールアドレスと電話番号の記述欄と保存ボタンを配置している。

<div>
    <p>電話番号
        <input type="text" id="number" name="number">
    </p>
    <p>メールアドレス　
        <input type="text" id="email" name="email">
    </p>
</div>
<button id="save">保存する</button>

localStorage に保存とその値を反映

そしてjavascriptでlocalStorageに保存できるよう以下の通りに記述した。

document.getElementById('save').addEventListener('click', function(){
//メールアドレスをローカルストレージに保存
 localStorage.setItem('email', document.getElementById('email').value);
//電話番号をローカルストレージに保存
 localStorage.setItem('number',document.getElementById('number').value);
 })

その後、保存された値を反映するために以下の内容を記述。

document.getElementById('email').value = localStorage.getItem('email');
document.getElementById('number').value = localStorage.getItem('number');

これで完了。cookieよりすごく簡単ではないか！！驚き。

初心者の私でも割とスッと理解できた。

ただこのlocalStorageはHTML5以降のもので古いブラウザーだと使用できないこともあるようだ。

localStorageの値の保存期間は無期限らしい。

sessionStorage

localStorageと記述方法は同じものでsessionStorageがあるがこれはブラウザーを一度閉じると保存したものは消えてしまうらしい。

その時その時の場合で使い分けるのがよさそうだ。ほんとに勉強になります。

udemy様ありがとうございます。

学んだこと、日常