javascript - 通过localStorage实现表格点击行置顶 且刷新页面保持当前状态
本文介绍了javascript - 通过localStorage实现表格点击行置顶 且刷新页面保持当前状态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
由于至少需要3列的值可以确定唯一的行
所以我的思路是
1.每次点击置顶按钮的时候 将对应行的那3列(每列为1个key)的value存入localStorage,即save过程
2.每次重新载入页面时,读取本地数据,在获取表格数据之后,每行的那3列都与存在本地数据对比,相等的就保持置顶
如上的想法,现在我的问题所在:
多次点击之后,每个列所对应的key的value应该不止一个 对比该如何进行
for循环不太清楚具体用法
解决方案
其实你不用每列为一个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 || '';
... // 下面就是对比表格数据了
这篇关于javascript - 通过localStorage实现表格点击行置顶 且刷新页面保持当前状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文