刷新网页后输入记录就会丢失,这种问题大家可能都遇见过,本程序专门为此种解决问题设计.
查看案例演示:点这里
如果你不想复制源码,也可以在html页面直接引入该脚本,
网页刷新后,你输入input框的内容会自动显示出来.
直接引入链接
<script src="https://wurenzhi.com/script/inputCookie.js"></script>
或者,上Git地址:Github-inputCookie
然后放上源码以供复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入内容保存到cookie</title>
</head>
<body>
<div><label>文字框<input type="text" name="" id="i1"></label></div>
<div><label>数字框<input type="number" name="" id="i2"></label></div>
<div><label>男<input type="radio" name="gender" value="man" id="i3"></label></div>
<div><label>女<input type="radio" name="gender" value="women" id="i4"></label></div>
<div></div>
<div>多选框
<label>1<input type="checkbox" name="number" id="i5"></label>
<label>2<input type="checkbox" name="number" id="i6"></label>
<label>3<input type="checkbox" name="number" id="i7"></label>
</div>
<div><label>下拉框
<select>
<option>111</option>
<option>222</option>
<option>333</option>
</select>
</label>
</div>
</body>
<script src="https://wurenzhi.com/jq.js"></script>
<script src="https://wurenzhi.com/script/inputCookie.js"></script>
<script></script>
</html>
下面是js
function getCookie(cname) {
let name = cname + '=', decodedCookie = decodeURIComponent(document.cookie), ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return null;
}
function setCookie(cname, cvalue, exdays) {
let d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = 'expires=' + d.toGMTString();
document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/';
}
//input存入cookie
$('input[type="text"],input[type="number"],input[type="date"]').bind('input propertychange', function () {
let id = $(this).attr('id');
let val = $('#' + id).val();
setCookie(id, val, 365);
});
$('select').change(function () {
let id = $(this).attr('id');
let val = $(this).children('option:selected').text();
setCookie(id, val, 365);
});
$('input[type="checkbox"]').change(function () {
let id = $(this).attr('id');
let val = $(this)[0].checked;
setCookie(id, val, 365);
});
$('input[type="radio"]').click(function () {
let id = $(this).attr('name');
let val = $(this).val();
setCookie(id, val, 365);
});
//input读取cookie
getInputCookie();
function getInputCookie() {
$('input[type="text"],input[type="number"],input[type="date"]').each(function (i) {
let id = $(this).attr('id');
let val = getCookie(id);
if (null != val && '' != val) $('#' + id).val(val);
});
$('select').each(function (i) {
let id = $(this).attr('id');
let val = getCookie(id);
if (null != val && '' != val) {
let find = $(this).children('option:contains(' + val + ')').attr('selected', true);
}
});
$('input[type="checkbox"]').each(function (i) {
let id = $(this).attr('id');
let val = getCookie(id);
if (null != val && '' != val) {
if (val == 'true') $(this).click();
// let find = $(this)[0].checked = val;
}
});
$('input[type="radio"]').each(function (i) {
let id = $(this).attr('name');
let val = getCookie(id);
if (null != val && '' != val) {
if ($(this).val() == val) {
$(this).click();
// let find = $(this)[0].checked = val;
}
}
});
}