本地文件如何调试cookie,个人经验分享!

news/2024/5/18 11:49:06 标签: cookie, js

最近在测试记住密码这个功能发现bug,由于后端使用的是CAS,所以只能本地调试。一开始浑然不知cookie只能存储服务器的页面上的数据,使用vscode作为开发工具,它不像webstorm一样一打开页面就是localhost:8080之类的地址,而是文件路径的地址,类似于这样:file:///D:/works/test.html 的。那么如果你使用vscode开发调试cookie首先要解决的就是启动本地服务器,那么下面就是详细的步骤:

1、终端输入:

npm install http-server -g

2、下载完后,在项目目录打开终端输入:

hs

3、这样就可以启动web服务器了,很简洁方便;

那么接下来就是cookie的set, get, del 三步操作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cookie</title>
</head>
<body>
<form id="myForm" action="login" method="post">
	<input type="text" value="" class="inp" name = "username" id="username" />
	<input type="password" value="" class="inp" name = "password" id="passwrod" />

	<div style="margin: 10px;">
		<span><input type="checkbox" id="remember"><label for="remember">记住我</label></span>
		<span style="float: right;">注册</span>
	</div>
	
	<button type="button" class="inp" id="btn" onclick="onsubmits()">立即登录</button>
</form>
      
<script type="text/javascript">
// window.onload = function(){
	var oForm = document.getElementById('myForm');
	var oUser = document.getElementById('username');
	var oPswd = document.getElementById('passwrod');
	var oRemember = document.getElementById('remember');
	//页面初始化时,如果帐号密码cookie存在则填充
	if (getCookie('username') && getCookie('password')) {
		oUser.value = getCookie('username');
		oPswd.value = getCookie('password');
		oRemember.checked = true;
	}
	//复选框勾选状态发生改变时,如果未勾选则清除cookie
	oRemember.onchange = function() {
		if (!this.checked) {
			delCookie('username');
			delCookie('password');
		}
	};
	//表单提交事件触发时,如果复选框是勾选状态则保存cookie
	var onsubmits = function() {
        console.log(123);
		if (remember.checked) {
			setCookie('username', oUser.value, 7); //保存帐号到cookie,有效期7天
			setCookie('password', oPswd.value, 7); //保存密码到cookie,有效期7天
            console.log(55);
		}
	};
// };
//设置cookie
function setCookie(name, value, day) {
	var date = new Date();
	date.setDate(date.getDate() + day);
	document.cookie = name + '=' + value + ';expires=' + date;
};
//获取cookie
function getCookie(name) {
	var reg = RegExp(name + '=([^;]+)');
	var arr = document.cookie.match(reg);
	if (arr) {
		return arr[1];
	} else {
		return '';
	}
};
//删除cookie
function delCookie(name) {
	setCookie(name, null, -1);
};

</script>
</body>
</html>

 


http://www.niftyadmin.cn/n/843428.html

相关文章

LeetCode刷题笔记 字节每日打卡 设计循环队列

设计你的循环队列实现。 循环队列是一种线性数据结构&#xff0c;其操作表现基于 FIFO&#xff08;先进先出&#xff09;原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓冲器”。 循环队列的一个好处是我们可以利用这个队列之前用过的空间。在一个普通队列里…

使用 spice-guest-tools 让虚拟机支持spicec 双屏显示

为什么80%的码农都做不了架构师&#xff1f;>>> 感谢朋友支持本博客&#xff0c;欢迎共同探讨交流&#xff0c;由于能力和时间有限&#xff0c;错误之处在所难免&#xff0c;欢迎指正&#xff01; 如果转载&#xff0c;请保留作者信息。 博客地址&#xff1a;http:…

LeetCode刷题笔记 字节每日打卡 正则表达式匹配

给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 . 和 * 的正则表达式匹配。 . 匹配任意单个字符 * 匹配零个或多个前面的那一个元素 所谓匹配&#xff0c;是要涵盖 整个 字符串 s的&#xff0c;而不是部分字符串。 示例 1&#xff1a; 输入&#xff1a;s …

使用cookie实现记住密码功能(由于存在安全性,限内部系统使用)

最近在做一个记住密码的功能&#xff0c;如果使用cookie实现该功能的话&#xff0c;一定会存在安全隐患&#xff0c;大家都知道保存在浏览器的密码都能看到&#xff0c;还好我们系统是内部使用&#xff0c;部署在局域网&#xff0c;这样就没有疑虑了。具体dome如下&#xff1a;…

openstack 用nova API 指定 compute node 创建 instance

为什么80%的码农都做不了架构师&#xff1f;>>> 感谢朋友支持本博客&#xff0c;欢迎共同探讨交流&#xff0c;由于能力和时间有限&#xff0c;错误之处在所难免&#xff0c;欢迎指正&#xff01; 如果转载&#xff0c;请保留作者信息。 博客地址&#xff1a;http:…

LeetCode刷题笔记 字节每日打卡 最大子数组和

给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 示例 1&#xff1a; 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,-5,4] 输出&#xff1a;…

elementUI el-table中的selection实现单选+全选框换成文字

1、首先我们把全选框换成自己想要的文字&#xff1a;这里有使用header-cell-class-name属性给表头添加自定义class&#xff0c; <el-tableheight"100%"ref"tables"v-loading"dataLoading":data"dataList"select"handleRow&quo…

power query(获取与转换):excel数据整理的新利器

在excel 2016版本中&#xff0c;“数据”选项卡下新内置了一个叫“获取与转换”组的功能。看起来简简单单的几个功能命令&#xff0c;真正应用起来&#xff0c;却别有洞天。这个叫“获取与转换”的组&#xff0c;其实就是power query&#xff0c;什么是power query&#xff0c;…