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ù)組。
感覺(jué)比較3個(gè)屬性過(guò)于復(fù)雜了,可以給每行一個(gè)唯一的 id,這樣只要看 id 是否匹配就可以。
相關(guān)文章:
1. 數(shù)組按鍵值封裝!2. java - web項(xiàng)目中,用戶登陸信息存儲(chǔ)在session中好 還是cookie中好,取決于什么?3. angular.js - webpack build后的angularjs路由跳轉(zhuǎn)問(wèn)題4. Mysql取下一條記錄5. mysql - 查詢字段做了索引為什么不起效,還有查詢一個(gè)月的時(shí)候數(shù)據(jù)都是全部出來(lái)的,如果分拆3次的話就沒(méi)問(wèn)題,為什么呢。6. mysql - 大部分?jǐn)?shù)據(jù)沒(méi)有行溢出的text字段是否需要拆表7. 老師,怎么不講一次性添加多個(gè)數(shù)據(jù)8. python - linux 下用wsgifunc 運(yùn)行web.py該如何修改代碼9. pdo - mysql 簡(jiǎn)單注入疑問(wèn)10. 表格對(duì)其 只涉及到對(duì)其,沒(méi)有涉及到大小,長(zhǎng)寬還有背景色類的嗎
