kintone temporay Storage

temporaryStorage.js

/*
 * 編集中/作成中の情報を一時保存する。
 * 保存:30秒に一回で保存
 * 復元:ボタンクリックにより復元。ただ、復元は次回保存前に行う必要あり(つまり30秒以内に復元ボタンを押す)
 * 
 * 保存にはsessionStorageを使用しているため、ブラウザが対応している必要があります。
 * 
 * Licensed under the MIT License
 */
(function() {
  
    "use strict";
    
    var Interval   = 30000;
    
    kintone.events.on(['app.record.create.show','app.record.edit.show'], function(event){
        if(typeof sessionStorage === 'undefined'){ return true; }
        
        var el = kintone.app.record.getHeaderMenuSpaceElement();
        
        var btnRestore = document.createElement("button");
        btnRestore.innerHTML = "　復元　";
        btnRestore.onclick = function(e){
            e.preventDefault();
            var now = kintone.app.record.get();
            var stored = sessionStorage.getItem("__KINTONE_STORAGE_KEY__");
            if(stored !== undefined && stored !== null){
                stored = JSON.parse(stored).record;

                //undefined(空白)だった場合、setに必要なvalue propertyまで取れてしまうのでそれを復元
                var setMissingValue = function(item){
                    for(var key in item){
                        switch(item[key].type){
                            case "SUBTABLE" :
                                for(var i = 0; i < item[key].value.length;i++){
                                    setMissingValue(item[key].value[i].value);
                                }
                                break;
                            default:
                                if(item[key].type !== undefined && item[key].value === undefined){
                                    item[key]["value"] = undefined;
                                }
                        }
                    }
                }
                
                setMissingValue(stored);
                for(var key in now.record){
                    switch(now.record[key].type){
                        case "RECORD_NUMBER" : break;
                        case "CREATOR" : break;
                        case "CREATED_TIME" : break;
                        case "MODIFIER" : break;
                        case "UPDATED_TIME" : break;
                        case "__REVISION__" : break;
                        default:
                            now.record[key].value = stored[key].value;
                    }
                }
            }
            kintone.app.record.set(now);
        
            return false;
        }
        el.appendChild(btnRestore);

        var pnlNotification = document.createElement("div");
        pnlNotification.id = "pnlNotification";
        pnlNotification.style.display = "none";

        var pnlMessage = document.createElement("div");
        pnlMessage.style.marginLeft = "20px";
        pnlMessage.style.width = "100px";
        pnlMessage.style.borderRadius = "6px";
        pnlMessage.style.padding = "3px";
        pnlMessage.style.textAlign = "center";
        pnlMessage.style.color = "dimgray";
        pnlMessage.style.backgroundColor = "skyblue";
        pnlMessage.innerText = "一時保存 完了"
        pnlNotification.appendChild(pnlMessage);
        
        el.appendChild(pnlNotification);

        setInterval(function(){
            if(typeof sessionStorage === 'undefined'){ return true; }
            
            var record = kintone.app.record.get();
            sessionStorage.setItem("__KINTONE_STORAGE_KEY__",JSON.stringify(record));

            var notification = document.getElementById("pnlNotification");
            notification.style.display = "inline";

            setTimeout(function(){
                var notification = document.getElementById("pnlNotification");
                notification.style.display = "none";
            },2000);
                        
        },Interval);
        
    });

})();

10秒おきに値を保存し、復元ボタンで復元可能。
なお、sessionStorageを使用しているためブラウザ本体を閉じてしまったりした場合はNG。

内部テーブルを複数行作成していた場合、エラーが発生する。行追加はJavaScript APIからできない?
行数を合わせればOK(3行作成していて値を復元したい場合、空の3行を作成しておけばよい)。

保存した時に何かメッセージを出すか、明示的な仮保存の実行ができた方がいい気もする(ただ、明示的に仮保存するくらいなら普通に保存すればという気はしなくもない)。

保存したときのメッセージを追加。
また、単純にx秒おきに保存という処理に変更(条件判定が分かりにくかったため)。そのため、保存タイミングは30秒おきに変更(若干長くした)。