javascript - Using localStorage to achieve the top row of a table when clicked and refresh the page to keep the current state

Question

Since at least 3 column values ​​are required to determine the unique row

So my idea is
1. Every time you click the top button, store the value of the 3 columns (each column has 1 key) in the corresponding row into localStorage, that is, the save process
2. Every time When the page is reloaded for the first time, the local data is read. After obtaining the table data, the three columns of each row are compared with the existing local data. If they are equal, they will be kept on top

The above idea, now my problem is:
After multiple clicks, the value of the key corresponding to each column should be more than one. How to compare
I don’t know the specific usage of the for loop

Answer 1

In fact, you don’t need to store each column as a Key. You can make the data of these three columns into a JS object, and then store the stringified value in localStorage, for example:

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

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

When using it, directly take out this value, then analyze it, and then take out the values ​​​​of col1, col2 and col3 for comparison

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

Can I pin multiple lines? If yes, you can save an array.

I feel that comparing 3 attributes is too complicated. You can give each row a unique id, so you only need to see if the id matches.