note から WordPress に出戻りました!😭

[ HTML5 ] ローカル記憶域 localStorage のサンプル

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です!
ご訪問ありがとうございます。ゆっくりしていってね。(本ページは広告を含みます。)

HTML5 から、ローカルマシンにデータを記憶するローカルストレージ(localStorage)と言う機能が使えるんだそうなので、サンプルを書いてみました。

動作サンプル

https://codepen.io/darucub/pen/LENZjyK

サンプルコード

以下のサンプルはブラウザを終了しても、入力した内容を保持します。

<!DOCTYPE html>
<html>
<head>
<title>localStorage のサンプル</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

    // 保存されている値を取り出す
    $("input#name").val(localStorage.name);

    // フィールドの内容を保存
    $("a.save").click(function(){
        localStorage.name = $("input#name").val()
    });

});
</script>
</head>
<body>
<input type="text">
<a href="#" class="save">保存</a>
</body>
</html>

わかった事

  • 文字列をローカルマシンに簡単に保存できる。

  • 保存できる容量は 5 MB とのこと。

  • sessionStorage もあるが、これはブラウザを終了すると中身が消えます。

  • 同じドメイン内であれば、データにアクセスできる。

参考にさせてもらったページ

ありがとうございます!

現場からは以上です。それでは、またッ!!!