Web Storage

• Web Storage

　KeyValue型のDBと認識している
　Web Storageのうち
　　localStorageは、次回アクセス時にも使いたい場合用。
　　sessionStorageは、セッション内で一時的に使いたい場合用。

<h1>Web Storageテスト</h1>
<form>
    <input value="検索" id="btnSelect" type="button">
    <input value="登録" id="btnUpdate" type="button">
    <input value="削除" id="btnDelete" type="button">
    <input value="クリア" id="btnClear" type="button">
    <input value="WebStorageをクリア" id="btnClearStorage" type="button"><br />
    番号：<input name="txtNo" id="txtNo" type="text"><br />
    名前：<input name="txtName" id="txtName" type="text"><br />
    年齢：<input name="txtAge" id="txtAge" type="text"><br />
</form>
<script>
    var chrName = "N";
    var chrAge = "A";
    var dispMode =
    {
        Init:0,
        Inst:1,
        Updt:2
    };

    (function(){
        // ローカルストレージが使えるか調べる。使えない場合は何もしない
        if (!window.localStorage) return;

        // フォームのクリア
        FormClear();
        // 画面項目の初期化
        setDispMode(dispMode.Init);

        // 検索
        document.getElementById("btnSelect").addEventListener("click", function(){
            var val = document.getElementById("txtNo").value;
            if (!val){
                alert("番号を入力してください。");
                document.getElementById("txtNo").focus();
                return;
            }
            val = window.localStorage.getItem(document.getElementById("txtNo").value + chrName);
            if (!val){
                alert("未登録の番号です。\n新規登録が可能です。");
                setDispMode(dispMode.Inst);
                return;
            }
            document.getElementById("txtName").value = val;
            val = window.localStorage.getItem(document.getElementById("txtNo").value + chrAge);
            document.getElementById("txtAge").value = val;
            setDispMode(dispMode.Updt);
        }, false);

        // 登録
        document.getElementById("btnUpdate").addEventListener("click", function(){
            var val = document.getElementById("txtName").value;
            if(!val){
                alert("名前を入力してください。");
                document.getElementById("txtName").focus();
                return;
            }
            val = document.getElementById("txtNo").value;
            window.localStorage.setItem(val + chrName, document.getElementById("txtName").value);
            window.localStorage.setItem(val + chrAge, document.getElementById("txtAge").value);
            alert("データを登録しました");
            setDispMode(dispMode.Updt);
        }, false);

        // 削除
        document.getElementById("btnDelete").addEventListener("click", function(){
            var val = document.getElementById("txtNo").value;
            window.localStorage.removeItem(val + chrName);
            window.localStorage.removeItem(val + chrAge);
            alert("データを削除しました");
            FormClear();
            setDispMode(dispMode.Init);
        }, false);

        // クリア
        document.getElementById("btnClear").addEventListener("click", function(){
            FormClear();
            setDispMode(dispMode.Init);
        }, false);

        // WebStorageクリア
        document.getElementById("btnClearStorage").addEventListener("click", function(){
            if(confirm("WebStorageを削除してよろしいですか？")){
                FormClear();
                window.localStorage.clear();
                setDispMode(dispMode.Init);
            }
        }, false);

        // クリア処理
        function FormClear(){
            document.getElementById("txtNo").value = "";
            document.getElementById("txtName").value = "";
            document.getElementById("txtAge").value = "";
        }

        // 画面制御
        function setDispMode(dispMode_){
            switch (Number(dispMode_)){
                case dispMode.Init:
                    document.getElementById("btnSelect").disabled = false;
                    document.getElementById("btnUpdate").disabled = true;
                    document.getElementById("btnDelete").disabled = true;
                    document.getElementById("txtNo").disabled = false;
                    document.getElementById("txtName").disabled = true;
                    document.getElementById("txtAge").disabled = true;
                    document.getElementById("txtNo").focus();
                    break;

                case dispMode.Inst:
                    document.getElementById("btnSelect").disabled = true;
                    document.getElementById("btnUpdate").disabled = false;
                    document.getElementById("btnDelete").disabled = true;
                    document.getElementById("txtNo").disabled = true;
                    document.getElementById("txtName").disabled = false;
                    document.getElementById("txtAge").disabled = false;
                    document.getElementById("txtName").focus();
                    break;

                case dispMode.Updt:
                    document.getElementById("btnSelect").disabled = true;
                    document.getElementById("btnUpdate").disabled = false;
                    document.getElementById("btnDelete").disabled = false;
                    document.getElementById("txtNo").disabled = true;
                    document.getElementById("txtName").disabled = false;
                    document.getElementById("txtAge").disabled = false;
                    document.getElementById("txtName").focus();
                    break;
            }
        }
    })();
</script>