WEB技术之前端技术

Sisyphus.js 一个表单内容自动本地保存、恢复的jQuery插件 附详细使用教程

沐风 2020-05-02 736次浏览 0条评论 0 0 0

原文链接:https://zpanz.com/post/399.html

2019-11-28

Sisyphus.js是一个本地自动保存草稿的jQuery插件,它会将你填到表单里的内容自动保存到浏览器的localStorage(本地存储),然后当你重新打开页面或刷新页面时会自动取出数据。

比如你洋洋洒洒写了千字长文,然后浏览器崩溃了,或者手抽按了一下F5...

本博的留言表单也使用了Sisyphus.js来储存访客的表单信息。

使用方法

引入jQuery类库以及Sisyphus.js

copy.svgMarkup
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/sisyphus.js/1.1.103/sisyph..."></script>

调用Sisyphus,定义相关机制

copy.svgJavaScript
 $(function(){
    $(  ).sisyphus({
		excludeFields: [],//要排除的字段
		customKeySuffix: ,//自定key保存表单内容数据
		locationBased: false,//根据放置表单的页面URI来存储表单的数据
		timeout: 0,//执行保存数据的时间间隔以秒为单位
		autoRelease: true,提交或重置后是否应从localStorage中删除表单的数据
		onSave: function() {},//每次数据自动保存都会触发这个函数
		onBeforeRestore: function() {},//还原表单数据前触发,如果返回false则不会还原数据onRestore也不会触发
		onRestore: function() {},//本地存储还原表单数据触发这个函数
		onRelease: function() {}//清除先前保存的数据触发这个函数
    });
});

举个栗子...

登录 | 立即注册

更新于:2020-05-02 01:05:48
    您需要登录后才可以评论。 登录 | 立即注册
    相关内容

    PHP向js传数组

    网上https://www.cnblogs.com/jiqing9006/p/9618417.html的答案是错误的

    js关于对齐方式display的三个属性

    原文https://www.cnblogs.com/xyyou/p/11070657.html这篇文章解释的比较清楚了display:inline-block,block,inline的

    WEB技术

    什么是WEB技术?下面会分前端技术和后端技术分别探讨。20180203未完待续。

    WEB技术之前端技术

    WEB技术之后端技术

    WEB应用转手机APP,手机APP制作平台推荐

    WEB应用与手机APP

    Android相关

    2017 年 Web 开发工程师技术发展路线图

    富文本编辑器

    个人比较喜欢的是 Redactor,还有Simditor、wangEditor和 bootstrap-wysiwyg,这些富文本的UI都很好看,特别是Red...

    富文本编辑器Redactor在Yii2中的应用

    推荐内容

    怎样使用V2Ray代理和SSTap玩如魔兽世界/绝地求生/LOL台...

    在网上找的ss+SSTap的方式都不能通过SSTap的链接测试。最后找到了v2ray+SSTap的方式。 注意事项,首先单独有v2ray看能不能正常上网。另外加速时要v2ray和SST...

    使用V2Ray的mKCP协议加速游戏

    当前脚本已发布新版本,地址: https://github.com/kuoruan/shell-scripts/raw/master/kcptun/kcptun.sh 旧仓库已废...

    v2rayN已停止工作

    要安装.NET Framework 4.6 或者更高版本

    解决'nmake' 不是内部或外部命令,也不是可运行的程序

    在用gifsicle时,需要在其src目录下使用 nmake -f Makefile.w32 命令,报错 'nmake' 不是内部或外部命令,也不是可运行的程序 或批处理文件。 于是网...

    超省心游戏加速:Wireguard+udp加速(CentOS版)--(

    Wireguard+udpspeeder+udp2raw游戏加速方案 ---------------------------------------错误报告及解决-----------...

    wireguard+udpspeeder+udp2raw多用户配置

    Wireguard+udpspeeder+udp2raw游戏加速方案改进版-实测有效