javascript - Utilisation de localStorage pour accéder à la ligne supérieure d'un tableau lorsque vous cliquez dessus et actualiser la page pour conserver l'état actuel

Question

Puisqu'au moins 3 colonnes de valeurs sont nécessaires pour déterminer la ligne unique

Donc mon idée est
1. Chaque fois que vous cliquez sur le bouton du haut, stockez les valeurs des 3 colonnes (chaque colonne a 1 clé) dans la ligne correspondante dans localStorage, qui est le processus de sauvegarde
2. rechargez la page, lisez les données locales. Après avoir obtenu les données du tableau, comparez les trois colonnes de chaque ligne avec les données locales existantes. Si elles sont égales, conservez-les en haut

.

L'idée ci-dessus, maintenant mon problème est :
Après plusieurs clics, la valeur de la clé correspondant à chaque colonne doit être supérieure à un
La boucle for n'est pas claire sur l'utilisation spécifique

.

Answer 1

En fait, vous n'avez pas besoin de stocker chaque colonne sous forme de clé. Vous pouvez transformer les données de ces trois colonnes en un objet JS, puis stocker la valeur chaîne dans localStorage, par exemple :

var col_identifier = {
    col1: ...
    col2: ...
    col3: ...
};

localStorage.setItem('col_identifier', JSON.stringify(col_identifier));

Lors de son utilisation, retirez directement cette valeur, puis analysez-la, puis retirez la valeur de col1、col2和col3 pour comparaison

var col_identifier = JSON.parse(localStorage.getItem('col_identifier') || '{}');

var col1 = col_identifier.col1 || '';
var col2 = col_identifier.col2 || '';
var col3 = col_identifier.col3 || '';

... // 下面就是对比表格数据了

Answer 2

Puis-je épingler plusieurs lignes ? Si oui, vous pouvez enregistrer un tableau.

Je pense que comparer 3 attributs est trop compliqué. Vous pouvez donner à chaque ligne un identifiant unique, il vous suffit donc de voir si l'identifiant correspond.