在多页面应用中,我们可能面临着前端页面之间传递参数的情况,在一个页面获取到一些参数信息后,到另一个页面去进行后续处理,需要将前一个页面得到的一些参数带到第二个页面。当参数较少时,可以在跳转第二个页面时通过search方法把参数传递过去,其实就是这样的方式:
windows.location = pagepath+'?arg='+arg;
第二个页面可以这样把参数取出来:
var reg = new RegExp("(^|&)" + "arg" + "=([^&]*)(&|$)","i");
var arg = location.search.substr(1).match(reg);
由于参数放在search串里,会显示在浏览器的地址栏,另外url有长度限制,参数多了也不美观。
参数较多的情况有什么更好的办法么?
这里要推荐用HTML本地存储-window.localStorage和window.sessionStorage了,两种方式使用方法一样,都是本地KV方式设置读取和删除。不同之处在于localStorage 存储的是没有截止日期的数据,而sessionStorage 存储的数据仅在当前标签页有效,如果用户关闭该浏览器标签页,数据会被删除,在别的标签页打开也是读不到数据的。
赋值参数页面
localStorage.setItem("key1", va1ue1);
localStorage.setItem("key2", value2);
sessionStorage.setItem("key3", va1ue3);
sessionStorage.setItem("key4", value4);
获取参数页面
var value1 = localStorage.getItem("key1");
var value2 = localStorage.getItem("key2");
localStorage.removeItem("key1");
var value3 = sessionStorage.getItem("key3");
var value4 = sessionStorage.getItem("key4");
sessionStorage.removeItem("key4");
两种本地存储在使用场景上要注意下。由于localStorage是本地全局级的,也就是说它不适用同一客户端的多实例,因为当你已经打开了一个赋值页面并进行了一次赋值,尚未跳转到获值页面,再在第二个标签页再次打开赋值的页面并进行了一次赋值,实际上会将你之前赋过的值覆盖掉,这样你再在第一个标签页进入获值页面,那么它获取的实际上是最后一次的赋值,也就是说它是不支持多赋值并行的。而sessionStorage则没有了这个限制,你可以打开任意多个标签页去赋值,任意顺序去跳转到获值页面都没有逻辑上的错误。