javascript - 透過localStorage實作表格點擊行置頂 且刷新頁面保持當前狀態

Question

由於至少需要3列的值可以確定唯一的行

所以我的思路是
1.每次點擊置頂按鈕的時候將對應行的那3列（每列為1個key）的value存入localStorage，即save過程
2.每次重新載入頁面時，讀取本地數據，在獲取表格數據之後，每行的那3列都與存在本地數據對比，相等的就保持置頂

如上的想法，現在我的問題所在：
多次點擊之後，每個列所對應的key的value應該不止一個 對比該如何進行
for循環不太清楚具體用法

#

Answer 1

其實你不用每列為一個Key儲存的，可以將這三列的資料做成一個JS對象，然後，將字串化的值存入localStorage,比如：

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

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

用的時候直接取出這個值，然後解析，再取出col1、col2和col3的值，進行比對

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

可以置頂多個行嗎？是的話可以存一個數組。

感覺比較3個屬性過於複雜了，可以給每行一個唯一的 id，這樣只要看 id 是否匹配就可以。