作者:小辛牛牛123牛牛小辛321 | 来源:互联网 | 2022-07-03 22:10
在HTML5中,localstorage是个不错的东西,在支持localstorage的浏览器中,能持久化用户表单的输入,即使关掉浏览器,下次重新打开浏览器访问,也能读出其值,很不错的一个东西,接下来实例介绍,需要的朋友可以参考下
在HTML 5中,localstorage是个不错的东西,在支持localstorage的浏览器中, 能持久化用户表单的输入,即使关掉浏览器,下次重新打开浏览器访问,也能读出其值, 下面给出的例子是使用jquery 在每次表单加载的时候,读localstorage的值,而在表单每次提交时则清楚其值的例子
首先是一个表单:
代码如下:
然后是js部分代码:
代码如下:
$(document).ready(function () {
/*
* 判断是否支持localstorage
*/
if (localStorage) {
/*
* 读出localstorage中的值
*/
if (localStorage.type) {
$("#type").find("option[value=" + localStorage.type + "]").attr("selected", true);
}
if (localStorage.name) {
$("#name").val(localStorage.name);
}
if (localStorage.email) {
$("#email").val(localStorage.email);
}
if (localStorage.message) {
$("#message").val(localStorage.message);
}
if (localStorage.subscribe === "checked") {
$("#subscribe").attr("checked", "checked");
}
/*
* 当表单中的值改变时,localstorage的值也改变
*/
$("input[type=text],select,textarea").change(function(){
$this = $(this);
localStorage[$this.attr("name")] = $this.val();
});
$("input[type=checkbox]").change(function(){
$this = $(this);
localStorage[$this.attr("name")] = $this.attr("checked");
});
$("form")
/*
* 如果表单提交,则调用clear方法
*/
.submit(function(){
localStorage.clear();
})
.change(function(){
console.log(localStorage);
});
}
});