JS-记住用户名【cookie封装引申】

简介: 1 DOCTYPE html> 2 3 4 5 调用封装好的cookie文件来制作小案例 6 7 8 9 10 11 12 ...
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>调用封装好的cookie文件来制作小案例</title>
 6         <script src="cookie.js" type="text/javascript" charset="utf-8"></script>
 7     </head>
 8     <body>
 9         <form action="" method="post" id="form1">
10             <input type="text" name="user" id="user" value="56" />
11             <input type="password" name="pass" id="pass" value="" />
12             <input type="submit" value="提交" id="btn"/>
13         </form>
14         
15     </body>
16     <script type="text/javascript">
17         var oTxt1 = document.getElementsByName('user')[0],
18             oForm1 = document.getElementById('form1'),
19             oBtn = document.getElementById('btn');
20         oForm1.onsubmit = function(){
21             setCookie('user',oTxt1.value,14);
22         }
23         oTxt1.value = getCookie('user');
24     </script>
25 </html>

 

cookie.js

 1 /*****设置cookie*****/
 2 function setCookie(name, value, iDay) {
 3     var oDate = new Date();
 4     oDate.setDate(oDate.getDate() + iDay);
 5     document.cookie = name + '=' + value + ';expires=' + oDate;
 6 }
 7 /*****获取cookie*****/
 8 function getCookie(name) {
 9     var arr = document.cookie.split("; ");
10     for(var i = 0; i < arr.length; i++) {
11         var arr2 = arr[i].split("=");
12         if(arr2[0] == name) {
13             return arr2[1]
14         }
15     }
16     return ""
17 }
18 /*****移除cookie*****/
19 function removeCookie(name) {
20     setCookie(name, 1, -1);
21 };

 

目录
相关文章
|
3月前
|
前端开发 数据安全/隐私保护
crypto-js中AES的加解密封装
文章介绍了如何在前端使用crypto-js库进行AES加密和解密,提供了加解密的函数封装示例,并演示了如何加密和解密字符串或对象。
305 1
crypto-js中AES的加解密封装
|
2月前
|
前端开发 JavaScript 安全
前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号
该 JavaScript 代码实现了一个严格的密码校验功能,确保密码满足多种安全要求,包括长度、字符类型、不包含中文及特殊字符、不与用户名相似等。通过多个辅助函数,如 `validateFormat` 检查密码格式,`isHasChinaCharFun` 检测中文符号,`getCharAll` 生成键盘组合,以及 `checkPasswordFun` 综合验证密码的有效性和安全性。此工具对于提高用户账户的安全性非常有用。
49 0
|
3月前
|
设计模式 JavaScript
JS发布订阅模式封装(纯手工)
发布订阅模式是JS常用的设计模式,在面试中也会经常遇到,以下是我的手写实现方式,经测试效果不错,小伙伴们们可以直接拷贝使用。
|
2月前
|
存储 JavaScript 前端开发
JavaScript Cookie
JavaScript Cookie
17 0
|
4月前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
4月前
|
存储 前端开发 JavaScript
揭秘!JavaScript本地存储的四大绝技:从Cookie到IndexedDB,让你的Web应用秒变数据存储高手,轻松应对各种挑战!
【8月更文挑战第4天】JavaScript为核心前端技术,提供多样本地存储方案以优化用户体验与减少服务器负载。首先,Cookie虽用于基本数据如登录状态,但受大小限制及安全性影响。接着,Web Storage中的LocalStorage持久存储不变数据,SessionStorage则限于单次会话。更进一步,IndexedDB作为全面数据库解决方案,支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
75 9
|
5月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
206 2
|
5月前
|
JavaScript
js函数封装 —— 金额添加千分位分隔符
js函数封装 —— 金额添加千分位分隔符
72 2
|
5月前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
236 0
|
5月前
|
JavaScript
js 高频实用函数封装汇总(持续更新)
js 高频实用函数封装汇总(持续更新)
40 0