Как сохранять порядок элементов на странице при её перезагрузке при помощи LocalStorage?

Question

[EgoryKH]

Здравствуйте.

Есть небольшое веб-приложение ToDO, вот ссылка:

https://codepen.io/EGORYKH/pen/poJJvZq

Все данные хранятся в массиве:

let todoList = []

Что я хочу? Я хочу чтобы при перетаскивании элементов на странице, сохранялся их порядок, после перезагрузки страницы.

Можно это как-то реализовать ? Чтобы появились элементы которые можно перетаскивать мышью введите в инпут (возле кнопки Select All) любое значение и нажмите Enter.

Answer 1

[BATPYIIIKOB]

Каждому элементу присвойте дополнительный атрибут data-id - и сохраняйте после его перетаскивания его позицию в массиве.
Далее в куки или localStorage сохраняйте массив данный элемент. При загрузке подгружайте их из хранилища и выводите элементы в необходимом порядке

Comments

[EgoryKH]

BATPYIIIKOB , Вы не знаете, есть примеры данной реализации ?

[BATPYIIIKOB]

EgoryKH, я делал реализацию на JQuery под Yii2 (там позиции сохранялись через AJAX в БД). Кода для JS нет.
У вас есть же

labelElement.className = 'form-check-label' + index

т.е. текущий индекс вы знаете, при этом добавляйте его первым элементом в массив допустим position
при перетаскивании также фиксируйте перетаскиваемый элемент и добавляете его изменённую позицию в массив position, старую удаляйте. Не забывая вносить данные массива в куки, либо localStorage (необходимо сеариализовать). в конечном итоге у вас всегда должен быть массив отражающий положение ваших элементов, например [12,1,3,11,7] - это index-ы ваших элементов.
При перегрузке страницы - проверяйте - существует ли переменная position в куках либо хранилище и считывайте порядок расположения ваших элементов (вообще, хорошо бы эти элементы вместе с позицией хранить в БД)

[EgoryKH]

BATPYIIIKOB, у меня просто что элементы перемещаются за счет jquery ui, и настроить как Вы сказали, будет проблематично