javascript - 通過(guò)localStorage實(shí)現(xiàn)表格點(diǎn)擊行置頂 且刷新頁(yè)面保持當(dāng)前狀態(tài)
問(wèn)題描述
由于至少需要3列的值可以確定唯一的行
所以我的思路是 1.每次點(diǎn)擊置頂按鈕的時(shí)候 將對(duì)應(yīng)行的那3列(每列為1個(gè)key)的value存入localStorage,即save過(guò)程2.每次重新載入頁(yè)面時(shí),讀取本地?cái)?shù)據(jù),在獲取表格數(shù)據(jù)之后,每行的那3列都與存在本地?cái)?shù)據(jù)對(duì)比,相等的就保持置頂
如上的想法,現(xiàn)在我的問(wèn)題所在:多次點(diǎn)擊之后,每個(gè)列所對(duì)應(yīng)的key的value應(yīng)該不止一個(gè) 對(duì)比該如何進(jìn)行for循環(huán)不太清楚具體用法
問(wèn)題解答
回答1:其實(shí)你不用每列為一個(gè)Key存儲(chǔ)的,可以將這三列的數(shù)據(jù)做成一個(gè)JS對(duì)象,然后,將字符串化的值存入localStorage,比如:
var col_identifier = { col1: ... col2: ... col3: ...};localStorage.setItem(’col_identifier’, JSON.stringify(col_identifier));
用的時(shí)候直接取出這個(gè)值,然后解析,再取出col1、col2和col3的值,進(jìn)行比對(duì)
var col_identifier = JSON.parse(localStorage.getItem(’col_identifier’) || ’{}’);var col1 = col_identifier.col1 || ’’;var col2 = col_identifier.col2 || ’’;var col3 = col_identifier.col3 || ’’;... // 下面就是對(duì)比表格數(shù)據(jù)了回答2:
可以置頂多個(gè)行嗎?是的話可以存一個(gè)數(shù)組。
感覺比較3個(gè)屬性過(guò)于復(fù)雜了,可以給每行一個(gè)唯一的 id,這樣只要看 id 是否匹配就可以。
相關(guān)文章:
1. python - Django有哪些成功項(xiàng)目?2. 實(shí)現(xiàn)bing搜索工具urlAPI提交3. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)4. Python從URL中提取域名5. 關(guān)于mysql聯(lián)合查詢一對(duì)多的顯示結(jié)果問(wèn)題6. 數(shù)據(jù)庫(kù) - Mysql的存儲(chǔ)過(guò)程真的是個(gè)坑!求助下面的存儲(chǔ)過(guò)程哪里錯(cuò)啦,實(shí)在是找不到哪里的問(wèn)題了。7. node.js - 微信小程序websocket連接問(wèn)題8. 直接打字符不可以嗎?>和>有區(qū)別嗎9. node.js - windows10下的npm全局路徑的復(fù)原或者將npm徹底刪除?10. Python中使用超長(zhǎng)的List導(dǎo)致內(nèi)存占用過(guò)大
