页面实现自动保存内容功能
实现自动保存功能有3三种方式
大家好，我是音神，最近在写功能的时候，遇到了自动保存内容功能，花了很久的时间，废了很多的心血，终于把它写完了，下面就来跟大家聊聊我的实现方式，哈哈哈，每次分享知识心里总是很开心，控制不住的开心~
1.第一种是使用js定时，页面加载完成先将内容保存到浏览器内存；然后编写定时代码，判断现在的内容是否和存储的内容一致，如果不一致就调用后端接口执行自动保存操作。
- 优点是后端会完整的保存数据
- 缺点是浏览器内存存储的数据量大
2.第二种也是定时方式实现的，和第一种类似，唯一不一样的地方是浏览器内存存储的不再是内容，而是内容的长度，定时判断对比的是长度，长度不一样时执行自动保存操作。
- 优点是浏览器内存存储的数据量小了
- 缺点是在打字的时候，如果只打一个字时，比如“啊”字，你会先输入一个a的字母，然后再去选字，这时，定时每秒执行一次，已经将带a字母的内容长度保存到了浏览器内存，当你选完“啊”字后，输入的长度和浏览器内存存储的长度一直，不会触发自动保存，不会自动将“啊”保存。
3.第三种是使用js的input事件，这个事件非常的神奇，只要你改变输入框的内容就会触发事件，输入内容也好、删除内容也好、输入空格也好，只要内容变了就会触发。所以可以直接在事件触发时进行调用后端接口，执行自动保存操作，非常完美。
- 优点是没有了第一种和第二种的额外逻辑处理，代码量少了，也不用担心方法2数据保存不完整的缺点了，也不用费脑细胞写复杂而又恶心的逻辑了，完全啥也不管了，只要你来我就保存，管你三七二十一，哈哈哈~
- 缺点是…目前还没想到，嘿嘿嘿~
4.当然还有更粗暴的方式，我就写一个js定时器，每秒调用一次，定时器啥也不写，就调用后端接口执行自动保存操作。看起来确实是继承了方法3的优点，代码量少了一些，也不用写复杂的代码逻辑了，但是呢，你一秒调用一次，服务器哥们受不了呀，他会疯的…
页面实现自动保存内容功能相关推荐
- 个人建议：设置Alt+S快捷键来控制VSCode自动保存切换功能
经常要修改配置文件或者组件Vue,但是自动保存如果设置了就会导致还没输入完成一个完整代码行,就自动格式化(当时这种情况真的想骂人),但平时编辑Vue页面文件又不想每次都去Ctrl+S保存(毕竟键盘死的 ...
- python实现二级页面带自动翻页功能，三级页面爬虫苏宁图书。
最近有在做小学期的项目,用scrapy实现爬取图书,下面是我实现的过程. 具体实现功能有:二级页面带自动翻页功能,三级页面的第一页爬取,大小类别的区分. 框架:scrapy 使用到chrome的插件: ...
- 博客——使用 Redis 实现博客编辑的自动保存草稿功能
本人个人博客网站,欢迎访问:学教府 一.功能需求 介绍: 在做个人博客网站时.在我们编辑博客时,有可能会突然关闭浏览器或浏览器崩溃的情况,而此时我们的文章才写一半,还没进行保存.如果没有自动保存功能, ...
- 前端页面倒计时+自动跳转功能（setTimeout和setTimeInterval两种实现）
setTimeout实现 <!-- 8秒倒计时 --> <p><span id="time"></span>秒后自动跳转到百度< ...
- Sublime Text3自动保存的功能(失去焦点自动保存)
这是最新版本的Sublime Text3的设置方法 (三部曲); 第一步:preferences 下面的settings:(和老版本的不一样了吧,之前有什么default 和 users,这里只有se ...
- 【汽车篇】01. 行车记录仪自动保存 ❀ 特斯拉 Model 3
特斯拉本身自带行车记录仪功能,可以将前后左右摄像头拍摄的内容保存到U盘中,虽然不能记录声音,但是有图像也可以起到很大的作用,关键是不用再花钱买行车记录仪. 很多的人对这个行车记录仪有个误解,那就是应该 ...
- CAD崩溃后自动保存的文件在哪里？
CAD崩溃后自动保存的文件在哪里?相信这个问题很多设计师小伙伴在CAD绘图过程中都曾遇到过,这也是CAD常见问题之一.本节内容小编就以浩辰CAD软件为例来给大家介绍一下软件崩溃后CAD自动保存的文件在 ...
- PPT设置自动保存时间 mac_对于Office或者WPS，你会设置自动保存时间吗？
电脑突然关机,文档还没保存? 相信经常写文档的小伙伴们,应该经历过正在写文档.写着写着电脑突然关机,所写的文档还没来记得保存,那该什么办?有些小伙伴的习惯就很好,每操作一部分就习惯性的按下快捷键[Ct ...
- 如何自动保存邮件草稿
2019独角兽企业重金招聘Python工程师标准>>> 用户在编辑邮件的过程中,总会遇到各种突发状况,未能及时的把邮件保存到草稿箱,例如:操作系统问题导致未编辑完成的邮件信息丢失:或 ...
最新文章
- Anaconda(miniconda)安装及使用--转
- 推荐一个 React 技术揭秘的项目，自顶向下的 React 源码分析
- 评估应用使用oracle磁盘空间,Oracle磁盘空间使用统计
- CF2B The least round way(贪心+动规)
- OneNote使用说明
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- 编程函数c语言,C语言编程（练习1：函数 ）
- 串口 浮点数 结构体_组态软件与串口服务器的配置
- pythonmatplot可视化_python:matplotlib基础数据可视化,pythonmatplotlib
- shiro 同时实现url和按钮的拦截_Shiro权限管理框架（一）：Shiro的基本使用
- 微信html5怎么制作,图文揭秘微信h5怎么制作-朋友圈微信H5页面制作方法
- python日历代码_python日历代码
- 微信接入验证 php,php版微信公共平台开发者认证实例
- 解决IOS播放器KxMovie播放音频卡顿的问题
- apache网站漏洞修复解决办法
- 在VMware Server上安装Windows Home Server“ Vail”
- 微信小程序——从后台获取数据库数据并在前台显示(前端+后端+数据库)
- dict 方法汇总
- 程序员美工和真正的游戏美工是两个世界的人
- 7.Unity2D 横版 未受伤害时，血条缓慢变透明+伤害数值显示（浮动，大小，颜色）+协程的应用