Как правильнее будет сохранять массив данных после изменений его представления в виде HTML
Я хочу сделать html список ul>li, где в каждой li будет карточка с данными, которые поступают из стороннего API средствами чистого JavaScript(ES6).
В последствии эти карточки могут удаляться, меняться местами (drag&drop) или обновляться свежими данными из API по пользовательским события.
Если просто описать алгоритм, то получается:
Первый вход на сайт > получение данных из API > изменение данных > нажал на кнопку "сохранить" > измененный объект записался в localstorage и следующие входы читаются уже оттуда.
И вот меня заинтересовал вопрос, как правильнее будет сделать это сохранение состояния изменений. В голове крутиться несколько вариантов:
- Изменять исходный массив объектов при каждом изменении в ul.
- При нажатии кнопки "сохранить" проходить по всем карточкам и собирать данные в новый массив объектов, который потом сохранять.
- Взять просто в текстовом виде разметку потомков UL и сохранить.
Я думаю, что это частая задача. Подскажите пожалуйста, что называется, лучшие практики. Заранее спасибо.