htm记住密码-js记住密码-cookies记住密码-记住密码加密

最新推荐文章于 2025-05-28 14:43:37 发布

SoberChi

最新推荐文章于 2025-05-28 14:43:37 发布

阅读量285

点赞数

分类专栏： html 文章标签： vue javascript jquery

本文链接：https://blog.youkuaiyun.com/weixin_44959182/article/details/110209796

版权

html 专栏收录该内容

16 篇文章

订阅专栏

**提示：代码实验需要写到项目中，打开单页面file://存储不了cookies！**
	
	本次代码技术栈element、vue、js-cookie、js加解密。一起讲解都在代码里面。大家如果还是不懂可以留言评论！

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js记住密码</title>
		<!-- 引入vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<!-- 引入el样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入el组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- 引入-js-cookie -->
		<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
	</head>
	<body>
		<div id="app" style="width: 600px;margin: 0 auto;margin-top: 100px;">
			<h3 style="color: #333;">记住密码</h3>
			<el-form :model="params" :rules="rules" ref="ruleForm" label-width="80px">
				<el-form-item label="账号" prop="account">
					<el-input v-model="params.account" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="params.password" placeholder="请输入"></el-input>
				</el-form-item>
			</el-form>
			<div style="margin-bottom: 20px;">
				<el-checkbox v-model="params.remember" style="margin-left: 80px;">记住密码</el-checkbox>
			</div>

			<el-button type="primary" @click="submit" style="margin-left: 80px;">提交</el-button>
		</div>

	</body>
	<script>
		var app = new Vue({
					el: '#app',
					data: function() {
						return {
							// 表单提交数据
							params: {
								account: '', //账号
								password: '', //密码
								remember: false, //是否记住密码
							},
							// 表单验证
							rules: {
								account: [{
									required: true,
									message: '请输入账号',
									trigger: 'blur'
								}],
								password: [{
									required: true,
									message: '请输入密码',
									trigger: 'blur'
								}],
							}
						}
					},
					mounted() {
						//如果密码cookies存在给表单赋值
						if (Cookies.get('password')) {
							// 先解密编码后赋值
							this.params.password = atob(Cookies.get('password')
							this.params.remember=true //默认记住密码
							}
						},
						methods: {
							//表单验证
							submit() {
								this.$refs.ruleForm.validate((valid) => {
									if (valid) {
										//如果用户点击了记住密码进行加密存中cookies里，这里用中文编码简单加密
										if (this.params.remember) {
											// 中文编码
											var password = btoa(this.params.password)
											// 储存cookies
											Cookies.set('password', password)
										} else { //不记住密码清楚cookies
											Cookies.remove('password')
										}
									} else {
										return false;
									}
								})
							}
						}
					})
	</script>

</html>