IE8下url包含中文使页面出现问题解决

        每次开发遇到IE8浏览器，总会遇到这样或那样的问题（内心os:为什么还有人用都快放进博物馆的浏览器啊啊啊！！！真实情况：有问题，好的，马上，立刻解决）。

      从这个问题中主要讲一下web存储sessionStorage和localStorage的用法，先来介绍一下问题的背景，IE8浏览器下，页面上通过关键词搜索来一些值，搜索词是加在url上的，给出url地址：http://www.buildhr.com/cwkeywords/index.php?jobname=%E5%B7%A5%E7%A8%8B%E5%B8%88，jobname是搜索词，从入口进来时转义过，但是如果手动修改是，比如这样http://www.buildhr.com/cwkeywords/index.php?jobname=工程师，访问的时候会引起弹出的注册窗口出现一段代码，看下图

                                            

        因为这个注册弹窗很多地方都在用，所以不能改，那就只能从这个项目的代码入手改了，我们发现如果url是http://www.buildhr.com/cwkeywords/index.php?jobname=%E5%B7%A5%E7%A8%8B%E5%B8%88这种格式，就不会出现这段代码，但是你阻止不了用户就要去输入中文，我想到的就是用户输入中文然后访问时，我把中文用urldecode解析一下，然后放到jobname后面，再来访问，但是这样会出现一个问题，就是页面会死循环。这时localStorage就用上了。贴上代码:

<script>
    function getIEVersion() {
        var userAgent = navigator.userAgent;
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
        if (isIE) {
            /MSIE (\d+\.\d+);/ig.test(userAgent);
            var version = parseInt(RegExp["$1"]);
            if (version >= 7 && version <= 10) {
                return version;
            } else {
                return 6;//IE版本<=7
            }
        } else if (userAgent.indexOf("Edge") > -1) {
            return 12;
        } else if (userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1) {
            return 11;
        } else {
            return -1;
        }
    }

    getIEVersion();
    
    var jobname = "<?php echo $_GET['jobname']; ?>";
    var script_uri = "<?php echo $script_uri; ?>";
    var jobnames = "<?php echo $jobnames; ?>";
    var aaa = localStorage.getItem('a')
    if (aaa !== null) {
        localStorage.removeItem('a')
    }
    var bbb=!aaa
    if (getIEVersion() == 8 && bbb) {
        if (jobname.length != '') {
             window.location.href = script_uri+'?jobname='+jobnames;
             localStorage.setItem('a', true)
        }
    }

</script>

        主要就是判断是不是IE8，然后进行了一次存值和删值得操作，达到条件，跳转一次然后中断。

        这个来讲一下web存储sessionStorage和localStorage的用法，sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

        什么是localStorage、sessionStorage？

        在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

        用法：

        localStorage.getItem(key):获取指定key本地存储的值
        localStorage.setItem(key,value)：将value存储到key字段

        localStorage.removeItem(key):删除指定key本地存储的值

        localStorage的优势与局限：

        localStorage的优势
        1、localStorage拓展了cookie的4K限制
        2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于 cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
        localStorage的局限
        1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
        2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
        3、localStorage在浏览器的隐私模式下面是不可读取的
        4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
        5、localStorage不能被爬虫抓取到localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空