标签：
关于localStorage和sessionStorage的基础说明说明网上一大堆，这里说下自己的一个亲身应用。
大家都知道如果前后端分离的话，往往很多时候可以前端先行，不依赖于后台(接口得提前定义好)。
但是存在两个问题：
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数据的数据结构是前后端共同约定好的。
localStorage + 配置url 前后端分离之前端先行
标签：
原文地址：http://www.cnblogs.com/xianZJ/p/4687959.html
