Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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 同時字幕で英語学習

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away