1.説明

セッションストレージとロカールストレージ Util の作成方法を共有します。

2.ソース

/**
 * セッション
 */
export const session = {

    /**
     * セッションストレージ設定
     * @param {string} key キー
     * @param {string} value 設定値
     * @param {integer} expires 有効時間
     */
    set(key, value, expires) {
        // 有効時間はミリ秒
        let params = { key, value, expires };
        if (expires) {
            // 有効時間を追加
            const data = Object.assign(params, { expiresStartTime: new Date().getTime() });
            sessionStorage.setItem(key, JSON.stringify(data));
        } else {
            if (value instanceof Object || Array.isArray(value)) {
                value = JSON.stringify(value);
            }
            sessionStorage.setItem(key, value);
        }
    },

    /**
     * セッションストレージ取得
     * @param {string} key キー
     * @returns {string} セッションストレージデータ
     */
    get(key) {
        let item = sessionStorage.getItem(key);
        try {
            item = JSON.parse(item);
        } catch (error) {
            console.error(error);
        }
        // 有効期間チェック
        if (item && item.expiresStartTime) {
            // 失効
            if (new Date().getTime() - item.expiresStartTime > item.expires) {
                sessionStorage.removeItem(key);
                return false;
            } else {
                return item.value;
            }
        } else {
            return item;
        }
    },

    /**
     * セッションストレージ削除
     * @param {string} key キー
     */
    remove(key) {
        sessionStorage.removeItem(key);
    },

    /**
     * セッションストレージをクリア
     */
    clear() {
        sessionStorage.clear();
    }
}


/**
 * ロカール
 */
export const local = {

    /**
     * セッションストレージ設定
     * @param {string} key キー
     * @param {string} value 設定値
     * @param {integer} expires 有効時間
     */
    set(key, value, expires) {
        // 有効時間はミリ秒
        let params = { key, value, expires };
        if (expires) {
            // 有効時間を追加
            const data = Object.assign(params, { expiresStartTime: new Date().getTime() });
            localStorage.setItem(key, JSON.stringify(data));
        } else {
            if (value instanceof Object || Array.isArray(value)) {
                value = JSON.stringify(value);
            }
            localStorage.setItem(key, value);
        }
    },

    /**
     * セッションストレージ取得
     * @param {string} key キー
     * @returns {string} セッションストレージデータ
     */
    get(key) {
        let item = localStorage.getItem(key);
        try {
            item = JSON.parse(item);
        } catch (error) {
            console.error(error);
        }
        // 有効期間チェック
        if (item && item.expiresStartTime) {
            // 失効
            if (new Date().getTime() - item.expiresStartTime > item.expires) {
                localStorage.removeItem(key);
                return false;
            } else {
                return item.value;
            }
        } else {
            return item;
        }
    },

    /**
     * セッションストレージ削除
     * @param {string} key キー
     */
    remove(key) {
        localStorage.removeItem(key);
    },

    /**
     * セッションストレージをクリア
     */
    clear() {
        localStorage.clear();
    }
}

3.参考