前段时间项目时遇到一个问题,iframe弹框中分页跳转时多选框中选中的值在跳转到第二页时数据无法保存,还好有前辈写过,拿着他的参考,省了我查找资料的时间,他使用的方法将数据先保存至sessionStorage,最后确定时再将数据从sessionStorage中渲染到父级页面.
因为之前没有实操过这种本地存储,所以知识点有点遗忘,在此先回顾一下:
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。个人的理解是你在打开一个页面时记录sessionStorage,当你把页面关闭时session中的数据即销毁.
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
更多关于sessionStorage与localStorage的知识可以查阅这篇博客http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html
因为localStorage的使用和sessionStorage的使用方法类似,又由于之前项目中使用的是sessionStorage,在此便将sessionStorage作为场景.
假设我们现在有这么一个需求,分页是通过ajax得到的数据,在第一页我们需要一些数据,但是在第二页我们需要另外的一些数据,我们不存储数据的话只能在将当前所在页的数据渲染到父级页面,那么多选的意义将大打折扣
sessionStorage.setItems(k,v) 可以将我们选择的每条数据进行存储
sessionStorage.removeItem(k)'k'为session的key值的数据
$('#tbody').on('click', '.ops', function() {//单个
if($(this).is(':checked')) {
var obj = {};
obj.id = $(this).val();
obj.name = $(this).data('name');
sessionStorage.setItem($(this).val(),JSON.stringify(obj));//将对象转为json字符串存储
} else {
sessionStorage.removeItem($(this).val());//当多选点击取消是移除session
}
})
在此我们遍历session,以便将值渲染到父级页面
var len =sessionStorage.length;//获取session中值的长度,以便遍历
for(var i = 0; i< len; i++) {
var key = sessionStorage.key(i);
var sessionObj = JSON.parse(sessionStorage.getItem(key));
...
}
至此,我们完成了数据的存储,移除某个数据,数据的遍历,这里还有最重要的一步便是将数据清除,如果不将数据清除则会在父级页面调用子页面时会在session中继续追加
sessionStorage.clear();
它可以在父页面调用子页面时添加或者在子页面中刚刚加载时执行