javascript - 通过localStorage实现表格点击行置顶 且刷新页面保持当前状态
问题描述
由于至少需要3列的值可以确定唯一的行
所以我的思路是 1.每次点击置顶按钮的时候 将对应行的那3列(每列为1个key)的value存入localStorage,即save过程2.每次重新载入页面时,读取本地数据,在获取表格数据之后,每行的那3列都与存在本地数据对比,相等的就保持置顶
如上的想法,现在我的问题所在:多次点击之后,每个列所对应的key的value应该不止一个 对比该如何进行for循环不太清楚具体用法
问题解答
回答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 || ’’;... // 下面就是对比表格数据了回答2:
可以置顶多个行吗?是的话可以存一个数组。
感觉比较3个属性过于复杂了,可以给每行一个唯一的 id,这样只要看 id 是否匹配就可以。
相关文章:
1. macos - mac下docker如何设置代理2. angular.js - ng-grid 和tabset一起用时,grid width默认特别小3. apache - 本地搭建wordpress权限问题4. 热切期待朱老师的回复,网页视频在线播放器插件配置错误5. docker 下面创建的IMAGE 他们的 ID 一样?这个是怎么回事????6. java - Spring Mvc全局异常处理器@ControllerAdvice不起作用?7. Whitelabel错误页面发生意外错误(类型=未找到,状态= 404)/WEB-INF/views/home.jsp8. javascript - web网页版app返回上一页按钮在ios设备失效怎么办?安卓上可以,代码如下,请大神帮助,万分感谢。9. Android下,rxJava+retrofit 并发上传文件和串行上传文件的效率为什么差不多?10. css3 - transition属性当鼠标一开的时候设置的时间不起作用
