使用LocalStorage存储用户已填写的表单信息(意外刷新后自动填充)

简介: 使用LocalStorage存储用户已填写的表单信息(意外刷新后自动填充)

使用LocalStorage存储用户已填写的表单信息(意外刷新后自动填充)


先引入一个js文件:sisyphus.min.js


(官网:http://sisyphus-js.herokuapp.com/


在页面的script中找个地方引用:


$( function() {
  $( "#basic_form" ).sisyphus();
  // or you can persist all forms data at one command
  // $( "form" ).sisyphus();
} );


备注:


1、我只用于存储form表单数据,至于其他的可以到官网去拜读下


2、用户提交表单之后记得清除localStorage里中的表单数据,因为sisyphus是将用户所填写的数据保存到localStorage的存储的格式为:key:  [id=form的id][name=undefined][id=标签的id][name=标签的name]


value:用户所填的数据


3、提交成功之后,清除localStorage:localStorage.clear();


4、不支持标签中onchange()调用的方法


20181211182045244.png


最简单的示例:http://www.jq22.com/jquery-info268

目录
相关文章
|
Web App开发 缓存 数据安全/隐私保护
解决浏览器自动填充用户名和密码最优雅的解决方案,优雅永不过时
浏览器记住用户名和密码并且自动填充怎么破?百度找的方法好像都不够优雅,优雅永不过时,今天我就带你优雅的解决这个问题。
1704 0
|
2月前
|
数据安全/隐私保护
使用这个设置,扫码后可立即填入上次提交的内容
已经提交过表单的用户在再次填表时,点击快速填充按钮可立即填入上次提交的内容,从而避免重复输入同样的信息,极大提升填表效率。 此外,开启防作假的图片、视频等数据将不会自动填充,仍需填表人重新拍照上传,确保数据的实时性与真实性。
|
5月前
如何在二维码中自动填充上次填写过的内容?
【自动填充上次填写的内容】功能能够提升填表效率,开启后,填表人在第二次打开该表单时,系统会默认显示他第一次填写的信息,减少反复填写的工作量。
|
5月前
|
开发者
在用户关闭页面时,提示用户有内容未保存-论onbeforeunload事件的用法
在用户关闭页面时,提示用户有内容未保存-论onbeforeunload事件的用法
76 0
|
存储 缓存 JavaScript
07设置用户头像的大小 授权获取用户的信息 缓存
07设置用户头像的大小 授权获取用户的信息 缓存
07设置用户头像的大小 授权获取用户的信息 缓存
|
前端开发
细讲前端设置cookie, 储存用户登录信息
我们都知道如果想做一个用户登录并使浏览器保存其登录信息,使得用户下次再访问网页的时候无需再次进行登录操作,我们需要用到 cookies , 今天我们就来讲讲前端如何给客户端设置 cookie cookie 只有在服务环境下,才能设置,所以如果要尝试练习设置cookie的话,可以使用webstorm编辑器, 它内部自带服务环境,如果用别的编辑器的小伙伴的话,先自己搭一个简单的服务环境哦~
1040 0
细讲前端设置cookie, 储存用户登录信息
|
XML Java 网络安全
纳税服务系统一(用户模块)【简单增删改查、日期组件、上传和修改头像】(一)
为了更好地掌握SSH的用法,使用一个纳税服务系统来练手…..搭建SSH框架环境在上一篇已经详细地说明了。
118 0
纳税服务系统一(用户模块)【简单增删改查、日期组件、上传和修改头像】(一)
|
Java 网络安全
纳税服务系统一(用户模块)【简单增删改查、日期组件、上传和修改头像】(二)
为了更好地掌握SSH的用法,使用一个纳税服务系统来练手…..搭建SSH框架环境在上一篇已经详细地说明了。
160 0
纳税服务系统一(用户模块)【简单增删改查、日期组件、上传和修改头像】(二)
|
JavaScript Java 网络安全
纳税服务系统一(用户模块)【简单增删改查、日期组件、上传和修改头像】(三)
为了更好地掌握SSH的用法,使用一个纳税服务系统来练手…..搭建SSH框架环境在上一篇已经详细地说明了。
179 0
纳税服务系统一(用户模块)【简单增删改查、日期组件、上传和修改头像】(三)
|
Java Spring
spring boot 中对修改的头像进行更改,同时删除原来的头像,头像是初始头像不删除,信息保存session,实时更新
spring boot 中对修改的头像进行更改,同时删除原来的头像,头像是初始头像不删除,信息保存session,实时更新
526 0