输入内容input存储到cookie,网页打开时读取,保存文件输入历史

最新推荐文章于 2021-06-04 02:08:30 发布

lxsxyxjh

最新推荐文章于 2021-06-04 02:08:30 发布

阅读量1.3k

点赞数

文章标签： js jquery java

本文链接：https://blog.csdn.net/lxsxyxjh/article/details/115752175

版权

刷新网页后输入记录就会丢失,这种问题大家可能都遇见过,本程序专门为此种解决问题设计.

查看案例演示:点这里

如果你不想复制源码,也可以在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;
			}
		}
	});
}

lxsxyxjh

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
输入内容input存储到cookie,网页打开时读取,保存文件输入历史

刷新网页后输入记录就会丢失,这种问题大家可能都遇见过,本程序专门为此种解决问题设计.如果你不想复制源码,也可以在html页面直接引入该脚本,网页刷新后,你输入input框的内容会自动显示出来.直接引入链接<script src="https://wurenzhi.com/script/inputCookie.js"></script>或者,上Git地址:Github-inputCookie然后放上源码以供复制<!DOCTYPE html><html
复制链接

扫一扫