利用h5的本地存储实现登录页面里的记住账号和密码功能

最新推荐文章于 2022-11-09 10:41:35 发布

nuc_八道门

最新推荐文章于 2022-11-09 10:41:35 发布

阅读量3.2k

点赞数 1

分类专栏：软件开发

本文链接：https://blog.csdn.net/nuc_badaomen/article/details/56670198

版权

软件开发专栏收录该内容

73 篇文章 0 订阅

订阅专栏

h5的本地存储localstorage是永久存储，除非人为的移出或清空。

h5的sessionstorage在有效关闭页面时清空，刷新页面时不会清空。

另外：不同的浏览器，本地存储的内容是独立的，也就是说如果用chrome浏览器生成的本地存储在其他浏览器上是不能用的

localstorage的使用：

属性：

length //storage内键值对数量只读
setItem //添加键值对 key value
getItem //根据key获取键值对
key //键名可以根据index属性获取键名
removeItem //根据key移除键值对
clear //清空

存储类型及大小

webStorage之存储字符串（只要能被序列化为字符串都可以）
每个域名下5M

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src='jquery.min.js'></script>
</head>
<body>
	<form action="check.php" method="post" id='loadform'>
			用户名
			<input type="text" id="name"name="name">
			<br>
			<br>
			密 码
			<input type="password" id="password" name="pass">
			<br>
			<br>
			    <input type="checkbox" id='jiyi'>记住账号
			 
			<button type="button" class="btn btn-default" id="submitBtn">登录</button>
		</div>
	</form>
</body>
<script>
	var user = document.getElementById('name');
	var	check= document.getElementById('jiyi');
	var datas = localStorage.getItem('guoqi'); //json字符串
	if(datas){
		dataObj = JSON.parse(datas);
		//JSON.parse()方法解析一个JSON字符串,构造由字符串描述的JavaScript值或对象
		username=dataObj.username;
	}else{
		username="";
	}
    if(username !== ""){
    	get('guoqi',200000);//设置过期时间为200000毫秒
    }
	$('#submitBtn').click(function(){
		fn();//设置本地存储
	});
	//fn()方法设置本地存储
	function fn(){
		if(check.checked){
            set('guoqi',user.value);
        }
	}
	//set()方法，设置本地存储的数据，数据中包括username(用户名)和time(时间节点)
	function set(key,val){
		var curTime = new Date().getTime();//获取当前时间
    	localStorage.setItem( key , JSON.stringify({username:val , time:curTime }));
    	//JSON.stringify()方法，把json对象转化成字符串
	}
	//get()方法，用来获取本地存储的数据并做过期判断
	function get(key,val){
	    var data = localStorage.getItem(key);
	    var dataObj = JSON.parse(data);//JSON.parse()方法，把json字符串转化成json对象
	    //判断若过期，则清空本地存储
	    if(new Date().getTime()-dataObj.time>val){
	    	localStorage.clear(); //清空本地存储
	    }else{
	    	check.setAttribute("checked","");
	    	user.value = username;
	    }
	}
</script>
</html>

以上代码就是记住账号功能，那么记住密码也是一样的，我就不在这里重述了。

目前来看，h5的localstorage在各大浏览器的兼容性还不错，方便使用哦！

nuc_八道门

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
利用h5的本地存储实现登录页面里的记住账号和密码功能

h5的本地存储localstorage是永久存储，除非人为的移出或清空。h5的sessionstorage在有效关闭页面时清空，刷新页面时不会清空。另外：不同的浏览器，本地存储的内容是独立的，也就是说如果用chrome浏览器生成的本地存储在其他浏览器上是不能用的
复制链接

扫一扫