广州公司制作网站百度网站地图在线生成

在多页面应用中，我们可能面临着前端页面之间传递参数的情况，在一个页面获取到一些参数信息后，到另一个页面去进行后续处理，需要将前一个页面得到的一些参数带到第二个页面。当参数较少时，可以在跳转第二个页面时通过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则没有了这个限制，你可以打开任意多个标签页去赋值，任意顺序去跳转到获值页面都没有逻辑上的错误。