Делали тут одну игрушку и понадобилось сохранять статус и уровень, чтоб после перезагрузки не начинать сначала. Ну и решили в localStorage сохранять. Но как дебажить? Оно же всё время записывает данные и потом начинает откуда-то не сначала! Нужно что-то типа эксплорера, чтоб ненужное удалять. Иду искать в гугл, и...ничего! Ну не то чтобы совсем ничего, есть расширения для браузеров, но это нужно для каждого браузера, да и под мобильные не будет, а нам надо на мобильном тоже. Был ещё еле еле рабочий скриптик, не буду его пиарить, можете сами по названию поискать, он примерно так и называется.
Ну, в общем, не долго думая, сажусь писать свой велосипед (или не велосипед?) и вот что получилось.
Вот тут скрипт на gist одним файлом (не считая зависимости w3.css):
https://gist.github.com/yesasha/5e8a...b0d8459c7fd616. Если нужно в свой проект этот файл кидаем в папку и испоьзуем.
Вот тут можно на codepen поиграться
https://codepen.io/yesasha/pen/ppdyWL. За одно увидите что другие проекты от codepen хранят в вашем localStorage.
Немного поясню как оно работает.
- Решил использовать таблицу, так как по моему мнению для таких данных таблица в самый раз, тем более я планировал её сортировать по разным столбцам.
- Выглядит она так как выглядит, потому что вот https://www.w3schools.com/w3css/w3css_tables.asp.
- Первый столбец это индекс. Это то в каком порядке записи находятся в localStarage. Во всяком случае в таком порядке браузер проходит по значениям при переборе. Это зависит от браузера, но может быть полезно это видеть.
- Второй столбец - это ключ, третий - значение. Числа сортируются как числа, строки как строки. Есть функция isNumeric, взятая с этого сайта, чтобы отличить числа от строк.
- При добавлении/удалении ключей, копируем содержимое в новый массив, потом сортируем его одной из 6 возможных функций (3 столбца, по 2 на каждый: убывание/возрастание). Потом обновляем таблицу, сравнивая старый массив с новым. Обновляем только изменившиеся значения. Не гарантирую, что данный подход самый хороший, но сделал так. По аналогии с virtual DOM. Кстати, массив не мутирует, а создаётся новый - аналогия с immutable state в redux. Но это пока всё.
- При клике на заголовки происходит сортировка и таблица обновляется.
Добавлю новые фичи если будет интерес к проекту. Так же жду вашу критику.