Как сохранить хранилище?

Question

[Esm322]

Как можно сохранить использование хранилища пользователем?
Мне необходимо сохранить в localStorage тип хранилища, используются серверное и локальное хранилища. Есть две функции, одна рендерит приложение с локальным хранилищем:

function createTodoAppLocal (container, title = 'Список дел', keyTasks) {
  const todoAppTitle = createAppTitle(title);
  const todoItemForm = createTodoItemForm();
  const todoList = createTodoList();
  const btnSwitch = switchStorageBtn();
  btnSwitch.dataset.storage = 'local';
  btnSwitch.textContent = 'Перейти на серверное хранилище';
  localStorage.setItem('local', btnSwitch.dataset.storage);

  listName = keyTasks;

  container.append(todoAppTitle, btnSwitch, todoItemForm.form, todoList);

  let localStorageData = localStorage.getItem(listName);
  if (localStorageData !== null && localStorageData !== '') {
    tasks = JSON.parse(localStorageData);
  }

  for (const itemArr of tasks) {
    let todoItem = createTodoItem(itemArr);
    todoList.append(todoItem);
  }

  todoItemForm.form.addEventListener('submit', async function (el) {
    el.preventDefault();

    if (!todoItemForm.input.value) {
      return;
    }

    const newTask = {
      id: getId(tasks),
      name: todoItemForm.input.value.trim(),
      done: false,
    }

    tasks.push(newTask);
    console.log(tasks);

    saveLocalStorage(tasks, listName);

    todoList.append(createTodoItem(newTask));
    todoItemForm.button.disabled = true;
    todoItemForm.input.value = '';
  })
}

И вторая, которая использует серверное хранилище:

async function createTodoApp (container, {
  title,
  owner,
  todoItemList = [],
  onCreateFormSubmit,
  onDoneClick,
  onDeleteClick,
}) {
  const todoAppTitle = createAppTitle(title);
  const todoItemForm = createTodoItemForm();
  const todoList = createTodoList();
  const btnSwitch = switchStorageBtn();
  const handlers = { onDone: onDoneClick, onDelete: onDeleteClick };
  btnSwitch.dataset.storage = 'api';
  btnSwitch.textContent = 'Перейти на локальное хранилище';
  localStorage.setItem('api', btnSwitch.dataset.storage);

  container.append(todoAppTitle, btnSwitch, todoItemForm.form, todoList);

  todoItemList.forEach(todoItem => {
    const todoItemElement = createTodoItemElement(todoItem, handlers)
    todoList.append(todoItemElement)
  })

  todoItemForm.form.addEventListener('submit', async el => {
    el.preventDefault();

    if (!todoItemForm.input.value) {
      return;
    }

    const todoItem = await onCreateFormSubmit({
      owner,
      name: todoItemForm.input.value.trim(),
    });

    const todoItemElement = createTodoItemElement(todoItem, handlers);

    todoList.append(todoItemElement);
    todoItemForm.button.disabled = true;
    todoItemForm.input.value = '';
  })
}

Затем они используется путем динамических импортов:

export async function loadApiStorage() {
  const { createTodoApp } = await import('./view.js');
  const {
    getTodoList,
    createTodoItem,
    switchTodoItemDone,
    deleteTodoItem
  } = await import('./api.js');
  const owner = 'myTasks';

  const todoItemList = await getTodoList(owner);
  createTodoApp(document.getElementById('todo-app'), {
    title: 'Мои дела',
    owner,
    todoItemList,
    onCreateFormSubmit: createTodoItem,
    onDoneClick: switchTodoItemDone,
    onDeleteClick: deleteTodoItem,
  })
}

export async function loadLocalStorage() {
  const { createTodoAppLocal } = await import('./view-local.js');
  createTodoAppLocal(document.getElementById('todo-app'), 'Мои дела', 'myTasks');
}

Переход с локального на серверный происходит путем клика по кнопке:

export function switchStorageBtn() {
  const btnSwap = document.createElement('button');

  btnSwap.classList.add('btn', 'btn-info')
  btnSwap.style.marginBottom = '10px';

  const local = localStorage.getItem('local');
  const api = localStorage.getItem('api');

  btnSwap.addEventListener('click', () => {
    btnSwap.dataset.storage = (btnSwap.dataset.storage === 'local' ? 'api' : 'local');
    btnSwap.dataset.storage === 'local' ? (container.innerHTML = '', loadLocalStorage()) : (container.innerHTML = '', loadApiStorage());
  })
  return btnSwap;
}

И мне нужно, чтобы тип хранилища сохранялся в localStorage. Подскажите, как это можно реализовать?

Comments

[Aetae]

Ну добавь в конце обработчика click

localStorage.setItem('storage-type', btnSwap.dataset.storage)

, в чём проблема то?

[Esm322]

Aetae, Большое спасибо!