Локальное хранилище — это функция современных веб-браузеров, позволяющая хранить данные в формате «ключ-значение» на стороне клиента. Это отличный способ сохранять данные между обновлениями страниц, и он является основным элементом многих веб-приложений. Однако собственный API для локального хранилища может быть немного громоздким, особенно когда речь идет об обработке сложных структур данных или обработке ошибок.

export default class AutoStorage {
    constructor(namespace, arr) {
        for (const [name, canBeEmpty] of arr) {
            const key = `${name}-${namespace}`
            this[name] = (value) => {
                if (value === undefined) {
                    const storedItem = localStorage.getItem(key)
                    try {
                        return JSON.parse(nullthrows(storedItem, new AutoStorageNullValueError(key)))
                    } catch (error) {
                        if (error instanceof AutoStorageNullValueError) {
                            if (canBeEmpty) {
                                return storedItem
                            } else {
                                throw error
                            }
                        }
                    }
                }
                localStorage.setItem(key, JSON.stringify(value))
                return value
            }
        }
    }
}

Введите приведенный выше блок кода, который обеспечивает простой и удобный способ работы с локальным хранилищем. Он экспортирует класс с именем AutoStorage, который можно использовать для создания экземпляров, представляющих области хранения с именами. Конструктор класса принимает два параметра: namespace и arr. Namespace — это строка, которая используется для отличия этой области хранения от других. Arr — это массив массивов, где каждый внутренний массив — это кортеж, содержащий флаги name и canBeEmpty. name — это ключ для значения, которое вы хотите сохранить, а флаг canBeEmpty указывает, разрешено ли значение не существовать в локальном хранилище, когда мы пытаемся его получить.

Обратите внимание, что, поскольку мы JSON.stringify все, что мы помещаем в локальное хранилище, это означает, что мы можем хранить нулевые значения в виде строки JSON. Флаг canBeEmpty указывает, что для этого ключа вообще не может быть значения в локальном хранилище.

Затем класс AutoStorage создает набор методов для каждого элемента параметра arr, где каждый метод соответствует одной паре ключ-значение. Затем эти методы назначаются свойствам экземпляра AutoStorage, используя name из кортежа в качестве имени свойства.

Каждый метод по сути является получателем/установщиком для соответствующего ключа локального хранилища. При вызове без аргумента он действует как геттер, возвращая значение для указанного ключа из локального хранилища. При вызове с аргументом он действует как установщик, сохраняя аргумент как значение для указанного ключа в локальном хранилище.

const settingsStorage = new AutoStorage("settingsStorage", [
    ["dbType",],
    ["user",],
    ["password",],
    ["token",],
    ["oracleUrl",],
    ["dwDataset",],
])

settingsStorage.dbType('oracle') // setter
console.log(settingsStorage.dbType()) // getter

Код использует JSON.stringify и JSON.parse для преобразования значений в строки и из строк соответственно. Это позволяет хранить и извлекать сложные структуры данных, такие как массивы или объекты.

В случае ошибки, такой как попытка получить значение, которое не существует, или анализ значения, которое не является допустимым JSON, код проверяет, установлен ли флаг canBeEmpty на true, и в этом случае он возвращает сохраненное значение. в локальном хранилище, не пытаясь его разобрать. Если canBeEmpty равно false, код выдает ошибку.

В заключение, приведенный выше блок кода — отличный способ добавить пользовательскую обработку в локальное хранилище. Он предоставляет удобный и интуитивно понятный способ хранения и извлечения значений из локального хранилища, а также упрощает обработку сложных структур данных и ошибок. Создаете ли вы небольшое приложение или крупномасштабную систему, этот код — отличный способ упростить работу с локальным хранилищем.

P.S.

Эта функция nullthrows удобна при попытке выяснить, является ли переменная нулевой или неопределенной.

export default function nullthrows(nullable, error, onlyCheckForNull = false) {
    if (onlyCheckForNull && nullable === null) {
        throw error
    }

    if (nullable === null || nullable === undefined) {
        throw error
    }

    return nullable
}

Я также создал собственный класс Error для обработки случая, когда значение в AutoStorage равно null.

class AutoStorageNullValueError extends Error {
    constructor(autoStorageKey){
        const message = `Value for key ${autoStorageKey} is null`
        super(message)
        this.name = AutoStorageNullValueError.name
        this.autoStorageKey = autoStorageKey
    }
}

export {
    AutoStorageNullValueError,
}

Спасибо, что дошли до конца!

Я использовал chatGPT для написания содержания этой статьи после того, как написал код. Удивительно, сколько времени это сэкономило мне.

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу