刷新页面如何保存表单值

新建一个html页面，定名为test.html，用于介绍若何利用cookie在页面刷新时保留表单值。

在test.html页面，在head头部加载jquery.min.js和jquery.cookie.js文件，当作功引入这两个文件，就可以利用jquery中的cookie方式来保留表单数据。

在test.html页面，建立一个form表单，在form表单内，利用input标签、textarea标签，建立三个文本输出框和一个提交按钮。代码如下：

在每个输入框标签内，利用js中的掉去核心事务（onblur）绑定标签，在表单框掉去核心时，执行coki（）函数，下面将在cokie函数中建立表单的cookie，用于保留数据。

注：为了便利获得表单对象，在onblur事务的coki()内，把当前表单的id属性作为参数传递给函数。

在coki（）函数中，经由过程传递过来的id获得表单输入框的数据，利用$.cookie()方式建立相对应的cookie，实现数据保留在浏览器端。

注：$.cookie（）方式的三个参数，第一个参数是cookie的名称，第二个参数是cookie的值，第三个参数是过时时候（这里设置为一天）

上一步把表单输入框的数据保留在浏览器端后，此刻就要实此刻页面刷新时，把保留在cookie中的数据读掏出来。也是利用$.cookie(）的方式，参数为cookie的名称，把获得的cookie数据经由过程val()方式给表单输入框设置值，至此，实现了刷新页面保留了表单值。

在浏览器打开test.html文件，在表单输入框中输入内容，刷新页面，每个表单的值实现了保留，不会改变，直至从头输入内容，表单值才会改变。

0 条评论