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

源码 隔壁老李于 2019-11-28 16:47:56 最后编辑
文章总结
AI正在生成摘要

Sisyphus.js是一个jQuery插件,可自动保存和恢复表单内容至浏览器localStorage。通过设置排除字段、自定义key、时间间隔等参数,可灵活配置使用。本文提供了详细的引入方法和使用示例。

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

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

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

使用方法

引入jQuery类库以及Sisyphus.js

<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/sisyphus.min.js"></script>


调用Sisyphus,定义相关机制

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


举个栗子

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<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/sisyphus.min.js"></script>
</head>
<body>
<form id="formid">
  <input type="text" name="input1" id="input1"  value="" >
  <input type="text" name="input2" id="input2" value="" >
  <input type="text" name="input3" id="input3" value="">
</form>
<script>
 $(function(){
    $( "#formid" ).sisyphus({
		excludeFields: $( "#input3"),
        timeout: 10,
		onRestore: function() {
            alert("数据已经还原");
        }
    });
});
</script>
</body>
</html>

资源下载

赞赏
取消
扫码支持 支付码
本文由 @隔壁老李 于 2019-11-28 发布在 野路子博客,如无特别说明,本博文章均为原创,转载请保留出处。
评论 (1)
访客
snowfox
这个挺不错,可以试试
· 来自北京市 · 回复
Top