localStorage remplace les items existants

**TBA_78** · 15/01/2024, 10h42

Bonjour,

J'en ai marre que l'on me rajoute une couche de pub quand j'écoute la radio via une application alors j'ai décidé d'en créer une et tout fonctionne sauf l'ajout aux radios favorites via le locaStorage qui sauvegarde bien 1 radio mais si j'en sélectionne une autre, elle écrase la précédente :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function updateFavoritesUI(favorites) {
  var favoritesContainer = document.getElementById('radios-favorites');
  favoritesContainer.innerHTML = ''; // Effacer le contenu actuel
 
  favorites.forEach(function (favorite) {
    // Créer et ajouter la nouvelle carte favori à l'interface utilisateur
    var newFavoriteCard = document.createElement('div');
    newFavoriteCard.classList.add('card', 'ps-0', 'pe-0', 'swiper-slide');
 
    var favoriteCardContent = `
      <div class="card__image">
        <img class="img-fluid" src="${favorite.image}" alt="Radio">
      </div>
      <div class="card__content">
        <span class="card__title mt-1">${favorite.title}</span>
        <audio data-src="${favorite.audioSrc}"></audio>
      </div>
    `;
 
    newFavoriteCard.innerHTML = favoriteCardContent;
    favoritesContainer.appendChild(newFavoriteCard);
  });
}
 
function saveFavoritesToStorage(favorites) {
  localStorage.setItem('radioFavorites', JSON.stringify(favorites));
}

Nom : localStorage.png
Affichages : 225
Taille : 19,8 Ko

Je vous remercie pour votre aide

**Doksuri** · 15/01/2024, 11h00

comment fais-tu appel a saveFavoritesToStorage(favorites) ? favorites est-il correctement a jour ?
dans l'idee, il faudrait faire quelque chose comme ca

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function saveFavoritesToStorage(newFavs) {
  const currentFavs = JSON.parse(localStorage.getItem('radioFavorites')) || [];
  currentFavs.push(newFavs);
  localStorage.setItem('radioFavorites', JSON.stringify(currentFavs));
}

**TBA_78** · 15/01/2024, 17h42

De cette façon :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
  // Sélection de la balise parente contenant la classe .controls
  var controlsDiv = document.querySelector('.controls');
 
  // Création de l'élément input pour le contrôle du volume
  var volumeControl = document.createElement('input');
  volumeControl.type = 'range'; // Type de l'input pour le contrôle du volume
  volumeControl.min = '0'; // Valeur minimale du volume
  volumeControl.max = '1'; // Valeur maximale du volume
  volumeControl.step = '0.1'; // Incréments pour ajuster le volume
  volumeControl.value = '1'; // Valeur initiale du volume
  volumeControl.addEventListener('input', function () {
    audioPlayer.volume = parseFloat(this.value); // Met à jour le volume selon la valeur de l'input
  });
 
  // Sélection de la colonne spécifique pour les contrôles
  var controlsColumn = controlsDiv.querySelector('.col-6.controls');
 
  // Ajout de l'élément input à l'intérieur de la colonne spécifique .col.controls
  controlsColumn.appendChild(volumeControl);
 
 
 
  // Définition de la source audio par défaut
  audioPlayer.src = defaultRadioSrc;
 
  cards.forEach(function (card) {
    card.addEventListener('click', function () {
      const imageSrc = card.querySelector('.card__image img').getAttribute('src');
      const radioSrc = card.querySelector('audio').getAttribute('data-src');
      const radioName = card.querySelector('.card__title').textContent;
 
      // Mettre à jour la carte dans la section "Lecture en cours"
      currentStationImage.src = imageSrc;
      currentStationTitle.textContent = "";
      audioPlayer.src = radioSrc; // Mettre à jour la source seulement au clic
 
      // Afficher le bouton favori car une radio est sélectionnée
      updateFavoriteButtonOnRadioSelect();
    });
  });
 
 
  window.onload = function () {
    updateFavoriteButton(false);
  };
 
 
  playButton.addEventListener('click', function () {
    if (audioPlayer.src && audioPlayer.src !== '') {
      audioPlayer.play();
    } else {
      console.error('Aucune source audio définie');
    }
  });
 
  pauseButton.addEventListener('click', function () {
    audioPlayer.pause();
  });
});
 
 
var favoriteButton = document.getElementById('favorite-icon');
 
// Fonction pour afficher ou masquer le bouton du cœur en fonction de la présence de radio
function updateFavoriteButton(hasRadio) {
  var favoriteIcon = document.getElementById('favorite-icon');
 
  if (favoriteIcon) {
    favoriteIcon.style.display = hasRadio ? 'block' : 'none';
 
    if (hasRadio) {
      var isAlreadyInFavoris = checkIfInFavoris();
      favoriteIcon.innerHTML = isAlreadyInFavoris ? '<i class="bi bi-star-fill colorYellow" onclick="toggleFavorite()"></i>' : '<i class="bi bi-star colorYellow" onclick="toggleFavorite()"></i>';
    }
  }
}
 
 
function updateFavoriteButtonOnRadioSelect() {
  var hasRadio = audioPlayer.src && audioPlayer.src !== '';
  var favoriteIcon = document.getElementById('favorite-icon');
 
  if (favoriteIcon) {
    favoriteIcon.style.display = hasRadio ? 'block' : 'none';
 
    if (hasRadio) {
      var isAlreadyInFavoris = checkIfInFavoris();
      favoriteIcon.classList.remove('bi-star-fill', 'bi-star');
      favoriteIcon.classList.add(isAlreadyInFavoris ? 'bi-star-fill' : 'bi-star');
    }
  }
}
 
 
 
function ajouterAuxFavoris() {
  var favorisImage = document.querySelector('#current-station img[alt="radio favorite"]');
 
  if (favorisImage && audioPlayer.src && audioPlayer.src !== '') {
    var isAlreadyInFavoris = checkIfInFavoris();
 
    if (isAlreadyInFavoris) {
      removeFromFavoris();
      favorisImage.innerHTML = '<i class="bi bi-star"></i>';
    } else {
      addToFavoris();
      favorisImage.innerHTML = '<i class="bi bi-star-fill"></i>';
    }
  }
}
 
 
 
function toggleFavorite() {
  var isAlreadyInFavoris = checkIfInFavoris();
  var favoriteIcon = document.getElementById('favorite-icon');
 
  if (isAlreadyInFavoris) {
    removeFromFavoris();
    favoriteIcon.classList.remove('bi-star-fill');
    favoriteIcon.classList.add('bi-star');
  } else {
    addToFavoris();
    favoriteIcon.classList.remove('bi-star');
    favoriteIcon.classList.add('bi-star-fill');
  }
}
 
 
 
 
function checkIfInFavoris() {
  // Récupérer les détails de la radio actuellement sélectionnée
  var currentTitle = document.getElementById('current-title').textContent;
 
  // Vérifier si la radio est déjà dans les favoris
  var favorites = getFavoritesFromStorage();
  var isInFavoris = false;
 
  favorites.forEach(function (favorite) {
    if (favorite.title === currentTitle) {
      isInFavoris = true;
      return;
    }
  });
 
  return isInFavoris;
}
 
function addToFavoris() {
  // Ajouter la radio aux favoris
  var currentTitle = document.getElementById('current-title').textContent;
  var currentImage = document.getElementById('current-image').getAttribute('src');
  var currentAudioSrc = document.getElementById('audioPlayer').getAttribute('src');
 
  var newFavorite = {
    title: currentTitle,
    image: currentImage,
    audioSrc: currentAudioSrc
  };
 
  var favorites = getFavoritesFromStorage();
  favorites.push(newFavorite);
 
  saveFavoritesToStorage(favorites);
 
  // Mettre à jour l'interface utilisateur avec les favoris mis à jour
  updateFavoritesUI(favorites);
}
 
function removeFromFavoris() {
  // Supprimer la radio des favoris
  var currentTitle = document.getElementById('current-title').textContent;
 
  var favorites = getFavoritesFromStorage();
  var updatedFavorites = favorites.filter(function (favorite) {
    return favorite.title !== currentTitle;
  });
 
  saveFavoritesToStorage(updatedFavorites);
 
  updateFavoritesUI(updatedFavorites);
}
 
 
/* mémoriser les ajouts aux favoris*/
function getFavoritesFromStorage() {
  const storedFavorites = localStorage.getItem('radioFavorites');
  return storedFavorites ? JSON.parse(storedFavorites) : [];
}
 
function saveFavoritesToStorage(favorites) {
  localStorage.setItem('radioFavorites', JSON.stringify(favorites));
}

**TBA_78** · 15/01/2024, 18h03

Envoyé par Doksuri

comment fais-tu appel a saveFavoritesToStorage(favorites) ? favorites est-il correctement a jour ?
dans l'idee, il faudrait faire quelque chose comme ca

De cette façon, cela ajoute un tableau vide. J'ai fait une vidéo avec des couleurs pas terribles mais ça devrait aller : https://www.cjoint.com/c/NApsftPZf37

**TBA_78** · 16/01/2024, 18h20

J'ai fait comme ça, mais cela donne ça :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
[
    [
        {
            "title": "",
            "image": "img/RTL.webp",
            "audioSrc": "http://streaming.radio.rtl.fr/rtl-1-44-128?listen=webCggNCQgLDQUGBAcGBg"
        }
    ],
    [
        [
            {
                "title": "",
                "image": "img/RTL.webp",
                "audioSrc": "http://streaming.radio.rtl.fr/rtl-1-44-128?listen=webCggNCQgLDQUGBAcGBg"
            }
        ],
        {
            "title": "",
            "image": "img/Latina.webp",
            "audioSrc": "http://start-latina.ice.infomaniak.ch/start-latina-high.mp3"
        }
    ],
    [
        [
            {
                "title": "",
                "image": "img/RTL.webp",
                "audioSrc": "http://streaming.radio.rtl.fr/rtl-1-44-128?listen=webCggNCQgLDQUGBAcGBg"
            }
        ],
        [
            [
                {
                    "title": "",
                    "image": "img/RTL.webp",
                    "audioSrc": "http://streaming.radio.rtl.fr/rtl-1-44-128?listen=webCggNCQgLDQUGBAcGBg"
                }
            ],
            {
                "title": "",
                "image": "img/Latina.webp",
                "audioSrc": "http://start-latina.ice.infomaniak.ch/start-latina-high.mp3"
            }
        ],
        {
            "title": "",
            "image": "img/RTL.webp",
            "audioSrc": "http://streaming.radio.rtl.fr/rtl-1-44-128?listen=webCggNCQgLDQUGBAcGBg"
        }
    ]
]

Voici les fonctions :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function saveFavoritesToStorage(newFavorite) {
  // Récupérer les favoris actuels depuis le stockage local
  var isAlreadyInFavoris = checkIfInFavoris();
  var storedFavorites = localStorage.getItem('radioFavorites');
  var favorites = storedFavorites ? JSON.parse(storedFavorites) : [];
  // Ajouter le nouveau favori à la liste
    if (!isAlreadyInFavoris) {
      favorites.push(newFavorite);
      // Sauvegarder la liste mise à jour dans le stockage local
      localStorage.setItem('radioFavorites', JSON.stringify(favorites));
    };
}

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function checkIfInFavoris() {
  // Récupérer les détails de la radio actuellement sélectionnée
  var currentTitle = document.getElementById('current-title').textContent;
  // Vérifier si la radio est déjà dans les favoris
  var favorites = getFavoritesFromStorage();
  var isInFavoris = false;
  favorites.forEach(function (favorite) {
    if (favorite.title === currentTitle) {
      isInFavoris = true;
      return;
    }
  });
 
  return isInFavoris;
}

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
/* mémoriser les ajouts aux favoris*/
function getFavoritesFromStorage() {
  const storedFavorites = localStorage.getItem('radioFavorites');
  return storedFavorites ? JSON.parse(storedFavorites) : [];
}

**NoSmoking** · 18/01/2024, 11h46

Bonjour,
pourquoi vouloir tout mettre dans le même enregistrement ?
Dans ton localStorage tu devrais retrouver quelque chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
"RTL": {
  "title": "",
  "image": "img/RTL.webp",
  "audioSrc": "http://streaming.radio.rtl.fr/rtl-1-44-128?listen=webCggNCQgLDQUGBAcGBg"
}
"Latina": {
  "title": "",
  "image": "img/Latina.webp",
  "audioSrc": "http://start-latina.ice.infomaniak.ch/start-latina-high.mp3"
}

La gestion en devient simplissime.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const Store = {
  store: window.localStorage,
  removeItem: function(item) {
    this.store.removeItem(item);
  },
  readItem: function(item) {
    return JSON.parse(this.store.getItem(item));
  },
  addItem: function(item, value) {
    this.store.setItem(item, JSON.stringify(value));
  },
  existItem: function(item) {
    return !!this.store.read(item);
  },
}

donc pour récupérer des données sur une radio il suffit de faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const data = Store.readItem("RTL");

**TBA_78** · 18/01/2024, 18h29

Merci, c'est beaucoup plus clair pour moi comme ça et en attendant, j'ai fait une liste des dernières radios écoutées et tout fonctionne bien mais les données du local storage sont détruites à la fermeture du navigateur :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////// DERNIERES RADIOS ECOUTEES //////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const currentStationImage = document.getElementById('current-image');
 
// Structure de données pour les dernières stations écoutées
var dernieresStations = [];
 
function ajouterADernieresEcoutees(title, image, audioSrc) {
  // Ajouter la nouvelle station au début de la liste
  dernieresStations.unshift({ title, image, audioSrc });
 
  // Limiter la taille de la liste à 10 (ou tout autre nombre souhaité)
  if (dernieresStations.length > 10) {
    dernieresStations.pop();
  }
 
  // Sauvegarder la liste mise à jour dans le localStorage
  localStorage.setItem('dernieresStationsEcoutees', JSON.stringify(dernieresStations));
}
 
// Fonction pour récupérer les dernières stations écoutées du localStorage
function getDernieresStations() {
  const storedStations = localStorage.getItem('dernieresStationsEcoutees');
  return storedStations ? JSON.parse(storedStations) : [];
}
 
// Appeler cette fonction chaque fois qu'une station est écoutée
function stationEcoutee(title = "Station par défaut", image = "img/defaut.webp", audioSrc = "audio/defaut.mp3") {
  ajouterADernieresEcoutees(title, image, audioSrc);
  updateDernieresStationsUI();
}
 
function updateDernieresStationsUI() {
  var dernieresStations = getDernieresStations();
  var dernieresStationsContainer = document.getElementById('dernieres-stations-container');
 
  // Vider le contenu actuel du conteneur
  dernieresStationsContainer.innerHTML = '';
 
  // Vérifier si la liste des stations est vide
  if (dernieresStations.length === 0) {
    // Afficher un message ou une icône indiquant qu'aucune station n'a été écoutée
    var emptyMessage = document.createElement('div');
    emptyMessage.classList.add('empty-stations-message');
    // emptyMessage.textContent = "Aucune station écoutée récemment. Les stations s'afficheront ici";
    emptyMessage.innerHTML = `
      <span class="icon-class"><i class="bi bi-star-fill colorYellow gros"></i></span>`;
    dernieresStationsContainer.appendChild(emptyMessage);
  } else {
    // Sinon, afficher les stations comme d'habitude
    dernieresStations.forEach(function (station) {
      var stationCard = document.createElement('div');
      stationCard.classList.add('cardFavoris', 'ps-0', 'pe-0', 'swiper-slide');
 
      // Utilisez l'image de la station ou une image par défaut si l'image de la station n'est pas disponible
      var imageSrc = station.image || 'img/13FM.webp'; // Chemin vers votre image par défaut
 
      var stationCardContent = `
        <div class="card__image">
          <img class="img-fluid" src="${imageSrc}" alt="Radio">
        </div>
        <div class="card__content">
          <span class="card__title mt-0">${station.title}</span>
          <audio data-src="${station.audioSrc}"></audio>
        </div>
      `;
 
      stationCard.innerHTML = stationCardContent;
      dernieresStationsContainer.appendChild(stationCard);
 
      stationCard.addEventListener('click', function () {
        currentStationImage.src = imageSrc;
        currentStationTitle.textContent = station.title;
        audioPlayer.src = station.audioSrc;
        audioPlayer.play(); // Jouer la station directement
      });
    });
 
  }
}
 
function jouerStation(audioSrc) {
  // Logique pour jouer la station
  console.log("Play :", audioSrc);
}
 
 
document.addEventListener("DOMContentLoaded", function () {
  updateDernieresStationsUI();
});

Nom : donneesNonPersistantes.png
Affichages : 150
Taille : 259,8 Ko

localStorage remplace les items existants

JavaScript

Vue hybride

Discussions similaires

Partager

Partager