Modification du code de stockage local pour ajouter ID unique à chaque élément

Question

Je travaille sur un morceau de fonctionnalité de stockage local basé sur cet exemple:

https://scriptscodes.com/codes/CrocoDillon/pIlKB/preview/index.html

CSS:

/* https://scriptscodes.com/codes/CrocoDillon/pIlKB/preview/index.html */ 
.list li{ 
    cursor:pointer; 
} 

.list li:before,.list li.fav:before { 
    font-family: FontAwesome; 
    content:"\f08a"; 
    color:white; 
    margin-right:10px; 
    font-size:14px; 
} 

.list li:hover:before { 
    font-family: FontAwesome; 
    content:"\f004"; 
    color:white; 
    margin-right:10px; 
    font-size:14px; 
} 

.list li.fav:hover:before,.list li.fav:before { 
    font-family: FontAwesome; 
    content:"\f004"; 
    color:red; 
    margin-right:10px; 
    font-size:14px; 
} 

Sample HTML :

<div class="list" style="background:#ccc; padding:20px;"> 
    <ul class="list-unstyled"> 
     <li id="petty">petty</li> 
     <li id="bedfordshire">bedfordshire</li> 
     <li id="rearing">rearing</li> 
     <li id="jane">jane</li> 
     <li id="furore">furore</li>       
    </ul> 
</div> 

Ensuite, je peux ajouter chaque élément au stockage local avec ce :

JS:

var favorites = JSON.parse(localStorage.getItem('favorites')) || []; 

document.querySelector('.list').addEventListener('click', function(e) { 
    var id = e.target.id, 
     item = e.target, 
     index = favorites.indexOf(id); 
    if (!id) return; 
    if (index == -1) { 
     favorites.push(id); 
     item.className = 'fav'; 
    } else { 
     favorites.splice(index, 1); 
     item.className = ''; 
    } 
    localStorage.setItem('favorites', JSON.stringify(favorites)); 
}); 

Une page de test en utilisant ce code est ici: https://jimpix.co.uk/testing/test3.asp

Ainsi, le tableau ressemble à ceci "favoris":

favorites:"["petty","rearing","jane"]" 

J'ai besoin de travailler comment éditer le JS pour que chaque élément reçoive un ID unique, de sorte que le tableau ressemble à ceci:

favorites:"[{"id":"1","name":"petty"},{"id":"2","name":"rearing"},{"id":"3","name":"jane"}]" 

Est-il possible de faire cela? Je préférerais ne pas utiliser jQuery car je devrais réécrire le JS utilisé dans ce code, et aussi sur une autre page où je publie les données de stockage local.

Merci

Answer 1

Je ne vois pas le problème il suffit de pousser favorites.push({ id: 1, name: "petty" } dans votre tableau et stringify après? Pour un identifiant unique de prendre l'indice de la boucle ou essayer quelque chose comme ceci: Math.floor(window.performance.now() * 1000)

Pour trouver si un élément est dans le tableau font exactement le suivant:

function isIdInArray(id) { // param id is the id youre looking for in the array 
    var isInArray = false; 
    favorites.forEach(function(favorite){ 
     if(favorite.id === id){ 
      isInArray = true; 
     } 
    }); 
    return isInArray; 
} 

Pour clarifier si vous faites index = favorites.indexOf(id); ce wil recherche une chaîne pour une chaîne. Par exemple. "apple".indexOf("ple"); renverra 2 parce qu'il a trouvé "ple" commençant dans la chaîne à la position 2. Si la chaîne ne contient pas la chaîne recherchée Eg: "apple.indexOf("tomato"); la valeur de retour sera -1. Vous ne pouvez pas exécuter indexOf sur un tableau. Vous pouvez rechercher votre tableau stringifié pour la valeur d'index avec indexOf() mais je ne vous recommanderais pas de le faire.