LoginSignup
2

More than 5 years have passed since last update.

設定を永続的に保存するためのWeb storage

Posted at

Qiitaに動画表示機能があるとしまして、その音量レベルとミュート設定を保存したり取り出すコードを人が使いやすいように書きました。
保存方法はWeb storageのLocal storageを使います。ブラウザのウィンドウやタブを閉じても永続的に保存されます。
StorageにはString型しか保存できないので、JSONファイルに変換してから保存します。

使い方は

App.js
const { Settings } = require('./Settings');
const settings = new Settings();
//Local storageに何も保存されていなければ初期設定を返します
console.log(settings.volumeLevel);//0.5が出力されます
//Local storageに保存します
settings.volumeLevel = 1.0;
//Local storageを読み込んで出力します
console.log(settings.volumeLevel);//1.0が出力されます

コードは

Settings.js

const APP_NAME = "QiitaVideo";

class Settings {
    constructor() {
        this._STORAGE_KEY = `${APP_NAME}Settings`;
        this._DEFAULT_SETTINGS = {
            volumeLevel: 0.5,
            isMuted: false,
        }
    }
    set volumeLevel(volumeLevel) {
        this._setKeyValue("volumeLevel", volumeLevel);
    }
    get volumeLevel() {
        return this._userSettings.volumeLevel;
    }
    set isMuted(isMuted) {
        this._setKeyValue("isMuted", isMuted);
    }
    get isMuted() {
        return this._userSettings.isMuted;
    }
    set _userSettings(userSettings) {
        const storage = this._getStorage();
        storage[this._STORAGE_KEY] = JSON.stringify(userSettings);
    }
    get _userSettings() {
        const storage = this._getStorage();

        const settingsJSON = storage.getItem(this._STORAGE_KEY);

        //初めてlocalstorageを使用する場合は初期設定を返す
        if (settingsJSON === null) return this._resetSettings();

        let settings;
        try {
            settings = JSON.parse(settingsJSON);
        } catch (e) {
            console.error('ユーザー設定のJSONファイルが壊れています。');
            console.warn('ユーザー設定を初期化します。');
            return this._resetSettings();
        }

        //ユーザー設定の検証
        if (!this._validateSettings(settings)) {
            console.error('ユーザー設定のプロパティが一致しません。');
            console.warn('ユーザー設定を初期化します。');
            return this._resetSettings();
        }

        return settings;
    }
    _setKeyValue(key, value) {
        const userSettings = this._userSettings;
        userSettings[key] = value;
        this._userSettings = userSettings;
    }
    _resetSettings() {
        const storage = this._getStorage();
        storage[this._STORAGE_KEY] = JSON.stringify(this._DEFAULT_SETTINGS);
        return this._DEFAULT_SETTINGS;
    }
    _validateSettings(settings) {
        const keys = Object.keys(this._DEFAULT_SETTINGS);
        return keys.every(key => (key in settings));
    }
    _getStorage() {
        try {
            return window.localStorage;
        } catch (e) {
            console.error('Web storageを利用できません');
            throw e;
        }
    }
}

module.exports = {
    Settings,
    APP_NAME,
};

最後に

英語字幕と日本語字幕を同時に表示させて英語学習が出来るChrome拡張機能を公開しました。
もしよければ使ってみてください。よろしくお願いいたします。
Hulu 同時字幕で英語学習
Netflix 同時字幕で英語学習

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2