LABO IWASAKI

ローカルストレージ

Local Storage

時代は変わるもので色々便利になった。
cookieとかsessionに保存していたモノにも変化が…。
ローカルストレージという場所に保管可能になりました。

名前のごとくローカルの保存場所です。
WEB上ではないので、データの流出もない。
ローカルのブラウザの保存領域を使うというモノです。

基本的な部分

Basic Writing

保存、削除、読込をそれぞれ書いておきます。
基本的にはこの3パターンを使います。
KeyとValueの組み合わせで保存する形になります。

//データの保存
localStorage.setItem("data1","hoge");
localStorage.setItem("data2","fuga");

//データの削除
localStorage.removeItem("data1");

//確認
localStorage.getItem("data1"); //undefined
localStorage.getItem("data2"); //"fuga"

応用する

Application

例えばボタンを押したらデータをクリアする場合。
単純にonClickで実装できます。

<script>
function doclear(){
localStorage.removeItem("mail");//削除
localStorage.removeItem("pass");
alert("記憶をクリアしました");
}
</script>
<p class="sto" onClick="doclear()">記憶クリア</p>

Formで使う

Use to Form

例えばログイン画面。
一度ログインするとIDとPASSを記憶しておきたい場合にcookieを使う場面があります。
同じ端末からログインする事が多いスマホサイトなんかではローカルストレージが安全ではないだろうか。

<script>
(function(){
if (!window.localStorage) return;
document.getElementById("mail").value = window.localStorage.getItem("mail") || "";
document.getElementById("pass").value = window.localStorage.getItem("pass") || "";
document.getElementById("dataForm").addEventListener("submit", function(){
window.localStorage.setItem("mail", document.getElementById("mail").value);
window.localStorage.setItem("pass", document.getElementById("pass").value);
}, true);
})();
</script>
<form id="dataForm" action="" method="POST" onSubmit="return nidoosi()">
    <input type="text" name="mail" class="mail" id="mail" />
    <input type="password" name="pass" class="pass" id="pass" />
    <input type="submit" name="go" class="go" value="Log in" onsubmit="return false"/>
</form>

もし、ローカルストレージに値が入っていたら、ページを表示した時にinputエリアに入れる。
ログインボタンを押したらそれぞれをローカルストレージに保存する。という内容です。