Блог

Главная - Вопросы по программированию - Каков наилучший способ хранения нескольких элементов в локальном хранилище?

Каков наилучший способ хранения нескольких элементов в локальном хранилище?

#javascript #html #local-storage

Вопрос:

Нет никаких проблем с одним элементом. Мне нужно сделать не менее 10 кнопок, причем так, чтобы они не зависели друг от друга. То есть некоторые кнопки были со скрытым текстом, а другие с открытым текстом.

Как лучше всего это сделать, чтобы код не выглядел как уродец?

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
#myid { display: none; }
</style>

<button onclick="onclickmyid()">Open</button><br><br><span id="myid">Hidden text</span>

<script>
var myid = document.getElementById('myid');
function onclickmyid() {
  myid.style.display = (myid.style.display == 'block') ? '' : 'block';
  localStorage.setItem('conceal', myid.style.display); 
}
if(localStorage.getItem('conceal') == 'block') { 
  document.getElementById('myid').style.display = 'block';
}
</script>

</body>
</html>

Комментарии:

1. Можете ли вы попытаться перефразировать свой вопрос

Ответ №1:

Поместите все необходимые постоянные данные в массив или объект, а затем сериализуйте этот (единственный) массив или объект в один ключ локального хранилища. Что-то вроде

 const config = localStorage.config
  ? JSON.parse(localStorage.config)
  : defaultConfig; // define defaultConfig earlier
cons saveConfig = () => localStorage.config = JSON.stringify(config);

// then, to save to the config when a change is made:
function onclickmyid() {
  const newShow = myid.style.display === '';
  config.myid = newShow;
  updateUI();
  saveConfig();
}

// and retrieve values on pageload:
const updateUI = () => {
  myid.style.display = config.myid ? 'block' : '';
  // etc for other elements
};
updateUI();

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

Для получения дополнительных кнопок просто добавьте дополнительные свойства к config объекту, переключите их и получите доступ к ним в обработчиках щелчков.

Комментарии:

1. Спасибо за ссылку на addEventListener, там очень подробное описание. Но ваш пример все еще труден для меня. Можете ли вы показать минимальный пример для двух кнопок?

2.Для получения дополнительных кнопок просто добавьте дополнительные свойства к config объекту, переключите их и получите доступ к ним в обработчиках щелчков.

Метки: