思路

1. 根据抓包软件fiddler或者chrome分析网上已有的草稿箱功能是怎样一个实现的模式；以简书编辑为例，便是在0.5S左右会自动保存一次，通过抓包可以看到在编辑的时候如图所示

   
   
   image.png
   
   

   可以得知每次编辑之后简书都会向服务器对应的url发送数据；需要注意的是发送的方式为put而不是post。

2. 因此不难得出，在实现类似自动保存功能的时候，需要向服务器put方式发送数据，并且在检测到鼠标没有输入之后的0.5S左右自动想服务器put一次数据。

3. 了解put及post的区别

简单地说：通常用于向服务器发送请求，如果URI不存在，则要求服务器根据请求创建资源，如果存在，服务器就接受请求内容，并修改URI资源的原始版本。
-----PUT请求那些封装在Request-URI的实体。如果Request-URI引用一个已存在的资源，则该封装实体应该作为原始服务器上的修改版本。如果Request-URI不是指向一个已存在的资源，并且该URI可被请求的用户代码定义为新资源，则原始服务器可用此URI创建新的资源。如果新的资源被创建，这个原始服务器就必须通过201（Created）响应通知用户代理。如果已有资源被修改，则发送200或者204响应，表示成功完成了该请求。如果Request-URI既没有创建也没有修改资源，则应给予适当的错误响应来反映问题本质。实体的接受者不能忽略任何不理解或没有实现的Content-*（如Content-Range）头部，并且必须返回501响应。

如果请求经过缓存，并且Request-URI标识出一个或多个当前缓存的实体，则那些实体视为过期了。该方法的响应不会被缓存。
POST请求的URI表示处理该封闭实体的资源，该资源可能是个数据接收过程、某种协议的网关、或者接收注解的独立实体。然而，PUT请求中的URI表示请求中封闭的实体-用户代理知道URI的目标，并且服务器无法将请求应用到其他资源。如果服务器希望该请求应用到另一个URI，就必须发送一个301响应；用户代理可通过自己的判断来决定是否转发该请求。

大致流程图思路分析（根据抓包）

根据点击新建文章之后，开始

1.png

根据图可知道，当点击新建文章之后post一段已经写好的数据，并会给出响应包括服务器给这篇新建的文章一个id号

2.png

根据1图返回状态码201表示创建成功；
接下来每次编辑的时候都向该id的文章进行put，服务器进行更新数据并且返回状态码200OK

流程图

1.点击新建文章之后像服务器发送一个字段，字段如图所示：

image.png

服务器进行新建一个文章数据字段，如果新建成功则返回一个id作为响应传回以及201状态码。
2.前端监听键盘输入事件，当键盘0.5S左右没有点击的时候便向服务器put数据，其中put形式如图所示

image.png

服务器需要更新将传过来的数据在文章数据库的id进行更新。更新成功传回一个状态码。

根据简书的自动保存得到大致流程如上