页面实现自动保存内容功能

实现自动保存功能有3三种方式

大家好，我是音神，最近在写功能的时候，遇到了自动保存内容功能，花了很久的时间，废了很多的心血，终于把它写完了，下面就来跟大家聊聊我的实现方式，哈哈哈，每次分享知识心里总是很开心，控制不住的开心~

1.第一种是使用js定时，页面加载完成先将内容保存到浏览器内存；然后编写定时代码，判断现在的内容是否和存储的内容一致，如果不一致就调用后端接口执行自动保存操作。

• 优点是后端会完整的保存数据
• 缺点是浏览器内存存储的数据量大

2.第二种也是定时方式实现的，和第一种类似，唯一不一样的地方是浏览器内存存储的不再是内容，而是内容的长度，定时判断对比的是长度，长度不一样时执行自动保存操作。

• 优点是浏览器内存存储的数据量小了
• 缺点是在打字的时候，如果只打一个字时，比如“啊”字，你会先输入一个a的字母，然后再去选字，这时，定时每秒执行一次，已经将带a字母的内容长度保存到了浏览器内存，当你选完“啊”字后，输入的长度和浏览器内存存储的长度一直，不会触发自动保存，不会自动将“啊”保存。

3.第三种是使用js的input事件，这个事件非常的神奇，只要你改变输入框的内容就会触发事件，输入内容也好、删除内容也好、输入空格也好，只要内容变了就会触发。所以可以直接在事件触发时进行调用后端接口，执行自动保存操作，非常完美。

• 优点是没有了第一种和第二种的额外逻辑处理，代码量少了，也不用担心方法2数据保存不完整的缺点了，也不用费脑细胞写复杂而又恶心的逻辑了，完全啥也不管了，只要你来我就保存，管你三七二十一，哈哈哈~
• 缺点是…目前还没想到，嘿嘿嘿~

4.当然还有更粗暴的方式，我就写一个js定时器，每秒调用一次，定时器啥也不写，就调用后端接口执行自动保存操作。看起来确实是继承了方法3的优点，代码量少了一些，也不用写复杂的代码逻辑了，但是呢，你一秒调用一次，服务器哥们受不了呀，他会疯的…