本节主要来讲一下，使用者在打开接口调试面板后，点击保存按钮，就会成功保存好，并且再次打开后，能显示出来呢？可能大家会觉得本节课没什么难度，就是简单的保存而已，但是实际上，本节是非常复杂的。因为接口的不同编码格式，我们保存起来的基本只有一个大字符串。要如何存储和展示是需要进行特殊设计的，类似 加密和解密，压缩和解压缩。
打开P_apis.html，先把取消功能写了：
如图在底部位置新增一个script，用来存放之后数个调试弹层的函数，请大家认真选好位置，因为本页面的后续div和script会非常非常多，如果不按照顺序和位置紧贴着写，很容易之后混乱，排查错误都费劲了
好，在这个script中写一个简单的funciton，作用为取消调试弹层，也就是不保存任何数据，直接隐藏该弹层。然后给取消按钮的onclick的属性写成这个ts_close函数。
启动服务，刷新页面试一下：
发现已经可以成功关闭这个弹层了。
接下来我们写一个funciton,用来保存接口设置。
注意，从现在开始，整个接口测试平台的开发难度会突然上一个台阶，这个保存函数也会非常巨大，请大家做好心里准备。毕竟之后还要上好几个难度台阶。
我们先来分析下这个保存函数的结构再开始落实：
首先
1.它要获取用户输入的所有数据
2.它要调用一个请求，把这些数据发给后台，中间要带上接口id
3.等到保存成功，它要关闭该调试弹层
好，我们刚刚做完了概要分析，现在需要进行详细设计：
三步中，后面俩步没什么可说的，主要是第一步，其中包含有以下小步骤：
1.获取请求方式
2.获取url
3.获取host
4.获取请求头
5.确认当前请求体的编码方式正在哪个页面
6.根据不同的编码方式页面，对其下面的请求体进行压缩
7.传递给后端的参数中，要有一个字段来记录请求体编码格式
好，已经基本分析完毕，具体如何进行请求体编码格式的压缩，我们会用一种很好理解并且接地气的方式进行。当然等到全平台系列结束后，同学可以自行升级/修改其中的压缩方式，但是建议不要现在就这样做，因为后续教程会依据本节的简单方式来进行开发。
好我们先来啃第一个步骤，获取所有数据：
首先是获取请求方式：,那就要给这个select加上id了。id=ts_method
然后在js函数中直接获取select的value即可：
然后是url：
然后是host：
然后是请求体header：
好了，我们已经把简单的都写完了，我们加一个输出，来显示一下，用来检测我们之前写的这一大堆代码有没有问题：
这里我们用alert 和 console.log都可以。大家看自己习惯吧。如果是console.log，则需要打开调试器-console，适合比较大型的数据排查
我们前面章节忽略了一个问题，就是我们input输入框的显示颜色都是白色，这样靠色了，所以我们要把三个输入框的color属性设置黑色：
最好我们要把保存按钮的onclick属性设置成ts_save函数：
好，让我们刷新页面，随便输入点东西，然后点击保存按钮看下显示：
看来是成功了，
接下来让我们删掉这个alert,来继续获取 用户当前的请求体设置方式：
这里我们要如何获取呢？通过观察，发现当我们点击不同的编码方式的标签页面时，对应的li的class属性会变成active 意思是活动状态。
那么我们可以通过jquery的简单代码来获取到 ul=mytab 下面所有li标签中class属性为active的那个li内的静态夹杂文案：
顺便alert弹窗显示测试一下：可以发现没问题：
然后我们写一个判断，来判断不同的编码方式下，我们获取不同的小div中的数据，然后进行不同的压缩成一个列表或字符串。
先判断为none时的请求体吧,直接为空就可以，算是偷懒的一种行为。
在其他的判断下面因为都比较复杂，所以我们一个一个来分析。
为form-data的时候，用户写的明显是一张表格，我们要如何把其中的二维数据拿到呢？变成一个字符串好还是一个列表呢？
当然是列表。
按照如下代码即可：
if(ts_body_method == 'form-data'){
var ts_api_body = []; //新建这个空列表用来存放后续的数据
var tbody_ = $("table#mytable tbody")[0]; //获取该表格的内容部分
var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
for(var i=0;i<trlist.length;i++) {
var tdarr = trlist[i].children; // 获取tr下的俩个td
var key = tdarr[0].innerText; // 获取key
var value = tdarr[1].innerText; // 获取value
ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
}
console.log(ts_api_body)
}
测试结果如下：
看来是已经存储成功了。
本节内容到这里就暂时停下，大家好好消化一下。下节课要处理掉剩余的编码格式。
