页面刷新跳转后，导航栏高亮显示跳转前的点击位置

需求：比如有一个二级或三四级的菜单栏，页面不跳转时实现高亮显示是很容易的，网上有很多这样的素材。但是页面一跳转，新页面可就记不住你在上一个页面点击的位置了，也就不可能高亮显示。并且很多时候，跳转后的页面菜单栏是后台动态生成的，也就是菜单栏栏目不固定，那么就不可能给菜单栏高亮效果写死。不知道这个事利用前后台交互去做会不会容易点，但是现在是要用纯前台实现。

 

实现原理一：这时候必须找个地方给它把点击的位置存起来，等页面跳转后，从那个地方把标记取出来，再给导航相应的位置做高亮处理就好了。

 

方法1：利用 H5 的 localStorage ，但是IE67不兼容，IE8还存在问题，项目要求兼容性的，所以干脆没试过这方法。但是不要求兼容性的可以尝试一下，我还没来得及……

 

方法2：隐藏变量的方法应该也可行吧，但是页面需要异步处理，就是说要把隐藏变量放到不被刷新的位置，然额~我们是页面全刷新，这方法用不到。

 

方法3：利用 cookie 存储，但是 cookie 有安全性问题，项目里不让用。虽然不让用，但是我也贴出来吧。这是3个封装方法，可以直接调用的：

function getCookie(key){
    var arr1 = document.cookie.split('; ');
    for(var i=0;i<arr1.length;i++){
        var arr2 = arr1[i].split('=');
        if(arr2[0]==key){
            return decodeURI(arr2[1]);
        }
    }
}

function setCookie(key,value,t){
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + t);
    document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}

function removeCookie(key){
    setCookie(key,'',-1);
}

点击的时候调用 setCookie()，标记位置。然后页面跳转初始化的时候调用 getCookie()，取出标记，高亮显示菜单。

但是测试的时候有个问题，就是IE下 setCookie()方法放进去的值，页面跳转时就被清掉了，我还没来得及查原因。火狐下测试没问题，谷歌本地测不了。

 

方法4：利用 url 传参，我用的是这个方法，跳转后用 getUrlParam() 封装方法把参数取出来。

window.onload = function(){
//获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }

    var lv = getUrlParam('lv');
    var aId = getUrlParam('aId');
}

遇到的问题：如果是外链接的话，外链接本身就有参数，再加上我这一堆参数，跳转后就会出现问题。我是在初始化时循环导航栏的链接，就不给外链加标记参数了，就解决了。

我看到网上说，这种方法的缺点是在浏览器缓冲阶段，会看不到高亮。等页面加载完或导航栏加载完一段时间，才会变成高亮，有一个时间延迟。

 

实现原理二：

方法5：页面跳转初始化时就把 window.location.href 与导航栏的链接地址去做匹配，匹配上的就加高亮显示。我准备接下来写四级菜单的时候用一下这个方法，还不知道会不会出现问题，有问题再来补充……