개시하다

나는 크리스마스 이브의 요정, 대림웅일랑이다.
Darts Live 200S라는 장난감으로 연습용 어플을 만들려고 했는데.
집에 있던 호스트가 고장나서 터미널에 연결이 안 되고 치명적인 고장이 나서 다시 샀는데 다음에 얘기하자.
그래서 이번에는 즉석감으로 가득하지만 웹스토어 이야기다.

WebStorage 소개

징징거리면 기사가 많아요.
이는 로컬 환경(브라우저)에서 KeyValue로 데이터를 저장하기 위한 구조입니다.
JavaScript를 사용하여 데이터를 편집하고 저장할 수 있습니다.
이번에는 웹 애플리케이션으로 화면 조작 후 편집 데이터를 DB 업데이트에 저장하기 전에 매번 화면 표시에 사용하려고 했다.

WebStorage 정보

이것도 생략할 수 있는 문장이 많은데 간단하게 쓰면 다음과 같은 종류와 특징이 있다.
■SessionStorage
• 브라우저, 탭이 닫힐 때까지 데이터를 저장합니다.
• 키가 같아도 브라우저, 탭 사이를 다른 데이터로 처리합니다.
· 이름은 세션이지만 서버는 해당되지 않습니다.
A:session 생성 소스에 따라 구분된 저장 영역을 사용합니다.그런 것 같아요.
■LocalStorage
・ 삭제할 때까지 데이터를 저장합니다.
• 키와 동시에 브라우저, 탭 간에 공통 데이터로 처리됩니다.
· 데이터는 로컬 기계의 구역에 저장된다.

좋은 일과 나쁜 일

■ 좋은 일
· 클라이언트가 데이터 관리를 완성(서버 필요 없음)
• 가장 가까운 브라우저라면 무엇이든지 사용할 수 있습니다
• js이기 때문에 개발자 도구로 데이터의 상태를 쉽게 파악할 수 있습니다
■ 나쁜 일
• js이기 때문에 XSS 대책을 세우지 않으면 위험합니다
□개인정보및기밀정보를 저장할 수 없음
· 로컬의 경우 명시적으로 폐기되지 않으면 데이터가 남는다
●관리해야한다

사용 예~화면 규격~

↓ 이런 장면에서.

녹색 상자 GRID의 데이터는 줄별로 ↓와 같은 하위 화면에 등록됩니다

하위 화면을 등록할 때 녹색 상자 GRID에 값 등의 화면 동작을 반영합니다.
그러나 하위 화면의 등록에 DB가 반영되지 않고 부모 화면의 업데이트 버튼으로 DB에 이와 같은 규격을 일괄적으로 반영한다.
이번에는 Session Storage 를 선택합니다.
① 실행 브라우저에서 여러 개의 탭을 열고 여러 개의 데이터를 참조합니다
② 화면 표시에만 사용 가능

사용예~ 설치~

WebStorage 방법·속성 정의용 js
아마 getItem, setItem,removeItem 정도일 거예요.
코드의 시작은useSession과
var storage = sessionStorage(localStorage)
에서 session or local을 지정합니다.

var SaenaiWebStorage = {

    useSession: true,       // セッションストレージを使うか否か

    /**
     * Storageが使用可能かどうか
     */
    usable : function () {
        return (typeof localStorage !== 'undefined');
    },

    /**
     * ストレージを取得する
     *
     */
    getStorage : function (useSession) {
        return (useSession) ? sessionStorage : localStorage;
    },

    /**
     * 保存する
     *
     * @param key
     *              Key名
     * @param data
     *              データ
     */
    save : function (key, data) {
        SaenaiWebStorage.getStorage(this.useSession).setItem(key, JSON.stringify(data));
    },

    /**
     * 取得する
     *
     * @param key
     *              Key名
     */
    get : function (key) {
        var data = SaenaiWebStorage.getStorage(this.useSession).getItem(key);
        return (data == null) ? null : JSON.parse(data);
    },

    /**
     * 削除する
     *
     * @param key
     *              Key名
     */
    remove : function (key) {
        SaenaiWebStorage.getStorage(this.useSession).removeItem(key);
    },

    /**
     * 全てクリアする
     *
     */
    clear : function () {
        SaenaiWebStorage.getStorage(this.useSession).clear();
    }
}

각 화면의 유지 데이터 모델
데이터의 내용은 데이터가 대상을 유지하는 항목이다.
function 화면 규격에 따라 데이터 취득 등 개별 설치
기본적으로 ↑의 웹스토어 방법을 사용하는 것은 최소한이 필요하다고 생각합니다.

/**
 *×× データリポジトリ
 *
 * WebStorageに中間データを保持する
 *
 */
var SaenaiRepository = {

    keyName : 'Blessing',

    data: {
        SaenaiKishList: [],                 //冴えない会社リスト
        CircleNameList: [],                 // サークル名リスト
        combobox: [],                       // 名称表示用Combobox
        shinkanInfo: null                   // 高くて薄い本情報
    },

    restore: function() {
        var storageData = SaenaiWebStorage.get(this.keyName);
        if (storageData != null) {
            this.data = storageData;
        }
    },
    save: function() {
        SaenaiWebStorage.save(this.keyName, this.data);
    },
    isRestored : function() {
        return this.data.SaenaiKishList.length > 0;
    },
    initialize : function () {
        this.restore();
    },
    remove: function() {
        SaenaiWebStorage.remove(this.keyName);
        this.data = {
            SaenaiKishList: [],
            CircleNameList: [],
            combobox: [],
            shinkanInfo: null
        }
    },
    getCircleName : function(cd) {
        var item = getItemfromList(this.data.CircleNameList, 'xxxxx', cd);
        return item == null ? '': item.yyyyyy + '：' + item.zzzzzz;
    },
    getSaenaiSikyKish: function (sikyKishKbn) {
        return getItemfromList(this.data.SaenaiKishList, 'kishKbn', kishKbn);
    },
    getComboboxItem: function (comboboxName, valueFieldName, value) {
        var list = this.data.combobox[comboboxName];
        return getItemfromList(list || [], valueFieldName, value);
    },
    getshinkanInfo: function(){
        return this.data.shinkanInfo;
    }
}

이후 화면에서save,remove,get을 생각할 때의 이벤트를 부르면 임시 데이터 관리를 할 수 있습니다.

최후

오래전부터 같은 방법으로 DB에 GRID 편집용 워크시트를 만든 흑역사가 있어요.
이번에 같은 실수를 반복하지 않았으니 정말 다행이다
WebStorage의 다른 용도도 다시 생각해 보고 싶습니다.
그럼, 좋은 크리스마스이브가 시작되었네요☆