localStorage + 配置url 前后端分离之前端先行

关于localStorage和sessionStorage的基础说明说明网上一大堆，这里说下自己的一个亲身应用。

使用localStorage配置url，使前端代码更方便适配测试和真实环境：

大家都知道如果前后端分离的话，往往很多时候可以前端先行，不依赖于后台(接口得提前定义好)。

但是存在两个问题：

    1、前后端分离后前端虽然不依赖于后台，但是依赖ajax返回的结果

    2、往往自己造的mock地址跟真是环境的url地址不一致，如果写死了，则需要改动很大一片

先说第二个问题，之前在一个项目上看到的时通过wiremock启动一个服务，这样可以解决这个问题，但是昨天在用的时候发现一个问题，就是如果通过wiremock起得应用跟webstorm起的*。html不在一个域之内，必须解决跨域问题，比较麻烦耦合性也比较大，所以干脆直接改为从本地读取。

$.ajax({
    url:'./config/config.json',
    type :'get',
    cache : false,
    dataType:"json",
    success : function(res){
        localStorage.removeItem("urlConfig");
        if(true){
            localStorage.setItem("urlConfig",JSON.stringify(res["debug"]));
        }
        else{
            localStorage.setItem("urlConfig",JSON.stringify(res["real"]));
        }
        console.log('urlConfig=',JSON.parse(localStorage.getItem("urlConfig")));
    },
    error : function(res){
        console.log("res",res);
    }
});

　　想必上面的代码大家可以看着有点不是很理解，但是看了config.json就好说了

{
  "debug" : {
      "index" :  "./mock/login.json",
      "selectRole" : "../mock/selectRole.json",
      "teacher" : "../mock/teacher.json"
  },
  "real" : {
    "index" :  "",
    "selectRole" : "",
    "teacher" : ""
  }
}

　　这里通过配置项来设置了两套url方案，如果是debug开发阶段你完全可以用自己写的mock(本地json)地址，当后台环境起来了，你只需给config.json添加环境地址和修改if(true)两处的代码即可。

    注1：这里之所以用到localStorage,是应为这个url配置方案一般只是在联调的时候才发生改变，一般不会发生改变，故而使用localStorage-->退出后不会被清空，加上浏览器缓存机制(这里需要设置)也能减少不必要的请求。

    注2：前后端分析，前端先行的前提一定是mock数据的数据结构是前后端共同约定好的。