localStorage APIで遊んでみる|広告代理店株式会社エークラウド

BLOG ブログ

エークラウドメンバーによるローテーションブログ

2020.08.17

localStorage APIで遊んでみる

システム / たかし

突然ですが、今回はlocalStorage APIで遊んでみます。

最近JavaScriptをほぼ触っていないので、復習の意味も含めて色々いじってみます。



ちなみにこのローカルストレージとは、クッキーの強化版と思ってもらって大丈夫です。

あ、cookie（クッキー）です、お菓子じゃないほうの。



クッキーと言えば、パスやアカウントをいちいち毎回打たなくてもいいように自動入力、もしくは自動ログインしてくれるあの便利機能。

クロームでは"デベロッパーツール"からApplication項目→Storage項目の中にlocalStorageという項目があるのでそこで中身を確認できます。





このメモ帳は即座に製作可能です。

まずは、お手元のテキストエディット等に以下のコードをコピペしてみましょう。

そのファイルに適当な名前を付けて拡張子を.HTMlにして保存。

あとはそのまま保存したファイルをブラウザで立ち上げます。



<html>

    <head>

        <title>JavaScriptでメモ帳を方法</title>

        <style type="text/css">

            textarea{width:100%;height:30%;}

        </style>

    </head>

    <body>

        <h1>書いたものを保存、読み込みできるメモです。</h1>

        <form name="form1">

            <textarea name="Memo"></textarea>

        </form>

        <p>

            <input type="button" value="保存" onclick=save(); ></input>

            <input type="button" value="読込" onclick=load(); ></input>

            <div id="memo"></div>

        </p>

            <script type="text/javascript">

                // 読込

                function load() {

                    var MemoData = "";//空箱作成

                    if(!localStorage.getItem('MemoDataBox')) {//もしMemoDataが空のとき・・・

                        MemoData = "メモは登録されていません。";

                    } else {//でなければ・・・

                        MemoData = localStorage.getItem('MemoDataBox');//ローカルストレージからMemoDataを取り出し

                    }

                    document.form1.Memo.value = MemoData;//form1にMemoDataを出力

                }

                // 保存

                function save() {

                    var MemoData = document.form1.Memo.value;//MemoDataにformの情報を格納

                    localStorage.setItem('MemoDataBox', MemoData);//ローカルストレージにMemoDataを格納

                    var elements = document.getElementsByClassName(memo);

                    elements.innerHTML = MemoData;

                }

            </script>

        </body>

</html>



上はシンプルなメモ機能のページです。

実際に記録されているかどうかは先程説明したクロームの"デベロッパーツール"で確認できます。



次にカスタマイズしてみます。

Body内にID名memoのdivタグがあるかと思います。

中身は何もない状態。



では、保存ボタンを押したときにタグ内にローカルストレージの情報を出力するようにしてみましょう。

タイミングは保存ボタンを押したときです。

なので、function save()内にコードを入れていきます。

以下のコードをコピペ。

                    var elements = document. getElementById('memo');//ID"memo"を探してelementsに格納

                    elements.innerHTML = '<p>' + MemoData + '</p>';//elementsをMemoData書き換えて出力



次にStorage内の情報を消去してみます。

Pタグ内に以下の消去ボタンを設置。

　　　　　　　　<input type="button" value="消去" onclick=Delete(); ></input>



次にjavascriptコード内に消去用のfunction(関数)を設置します。

                // 消去

                function Delete() {

                    localStorage.clear();//これでローカルストレージ全消去

                    MemoData = "メモを削除しました";

                    document.form1.Memo.value = MemoData;//form1にMemoDataを出力

                    var elements = document. getElementById('memo');

                    elements.innerHTML = '';//<div id="memo">~</div>内を空にする

                }



もっと効率の良い記述方法があるのかもしれないですが、僕の頭ではコレでいっぱいです。。



この他、ローカルストレージには配列を保存できたりできますが、注意点としては全部文字列になるということ。

数字を入れても取り出すときには勝手に文字列になってたりするのでこのあたりがちょっとめんどくさかったりします。