在说如何用cookie记录用户名之前,我们先来说说cookie的工作原理:

cookie : 存储数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来像访问者电脑上存储数据 ;
1.不同的浏览器存放的cookie位置不一样,也是不能通用的 ;
2.cookie的存储是以域名形式进行区分的 ;
3.cookie的数据可以设置名字的;
4.一个域名下存放的cookie的个数是有限制的,不同的浏览器存放的个数不一样 ;
5.每个cookie存放的内容大小也是有限制的,不同的浏览器存放大小不一样 ;
6.我们通过document.cookie来获取当前网站下的cookie的时候,得到的字符串形式的值,他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来;
7.如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间 ;
8.cookie默认是临时存储的,当浏览器关闭进程的时候自动销毁;

cookie的存储方式:

  • document.cookie = '名字=值';
  • document.cookie = 'username=win';
  • document.cookie = 'age=23';
  • document.cookie = '名称=值;expires=' + 字符串格式的时间;(给cookie设置过期时间)
  • var oDate = new Date(); (给cookie设置过期时间)
  • oDate.setDate( oDate.getDate() + 5 );(给cookie设置过期时间)
  • alert(typeof oDate.toGMTString()); (把日期对象转成字符串的形式)
  • document.cookie = 'username=win;expires=' + oDate.toGMTString();(给cookie设置成转换后的过期时间)
封装一个 读取Cookie方法的函数:
 function getCookie(key) {
var arr1 = document.cookie.split('; '); (username=win; age=23,把数据从分号开始拆成一个个cookie)
for (var i=0; i<arr1.length; i++) { (循环cookie)
var arr2 = arr1[i].split('='); (username=win,,把数据从等号开始拆分)
if ( arr2[0] == key ) { (判断截取的cookie值是否和key值相等)
return decodeURI(arr2[1]);
}
}
}
封装一个 设置Cookie的函数:
function setCookie(key, value, t) {
var oDate = new Date();
oDate.setDate( oDate.getDate() + t );
document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}
封装一个删除Cookie的函数:
 function removeCookie(key) {
setCookie(key, '', -1);
}
传参运行测试:

setCookie('sex','男', 10););

removeCookie('username');

removeCookie('age');

removeCookie('sex');

完整示例:
 <script>
window.onload = function() {
var oUsername = document.getElementById('username');
var oLogin = document.getElementById('login');
var oDel = document.getElementById('del');
if ( getCookie('username') ) {
oUsername.value = getCookie('username');
}
oLogin.onclick = function() {
alert('登陆成功');
setCookie('username', oUsername.value, 5);
}
oDel.onclick = function() {
removeCookie('username');
oUsername.value = '';
}
}
function getCookie(key) {
var arr1 = document.cookie.split('; '); (username=win; age=23,把数据从分号开始拆成一个个cookie)
for (var i=0; i<arr1.length; i++) { (循环cookie)
var arr2 = arr1[i].split('='); (username=win,,把数据从等号开始拆分)
if ( arr2[0] == key ) { (判断截取的cookie值是否和key值相等)
return decodeURI(arr2[1]);
}
}
}
function setCookie(key, value, t) {
var oDate = new Date();
oDate.setDate( oDate.getDate() + t );
document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}
function removeCookie(key) {
setCookie(key, '', -1);
}
</script>
<body>
<input type="text" id="username" />
<input type="button" value="登陆" id="login" />
<input type="button" value="删除" id="del" />
</body>

分享技术,分享快乐!

cookie记录用户名的更多相关文章

  1. cookie记录用户名和密码

    getAttribute和getParameter的区别: request.getAttribute():是request时设置的变量的值,用request.setAttribute("na ...

  2. dom cookie记录用户名

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 用cookie记住用户名

    有时候,我们在做登陆框时会有个复选框选择请记住我,或者有时候会遇到一些弹出框说下次不再提醒,此功能我们可以用js中的cookie实现此功能 下面记录一下如何实现该功能: 利用cookie记录用户名 1 ...

  4. cookie记录浏览记录

    cookie记录浏览记录 HashMap也是我们使用非常多的Collection,它是基于哈希表的 Map 接口的实现,以key-value的形式存在.在HashMap中,key-value总是会当做 ...

  5. cookie记录用户的浏览商品的路径

    在电子商务的网站中,经常要记录用户的浏览路径,以判断用户到底对哪些商品感兴趣,或者哪些商品之间存在关联. 下面将使用cookie记录用户的浏览过的历史页面.该网站将每个页面的标题保存在该页面的$TIT ...

  6. cookie记录横向滚动条位置

    一.Css <style type="text/css"> #x{ width: 100%; white-space: nowrap; overflow-x: scro ...

  7. 通过cookie记录,设置页面访问的跳转页

    通过cookie记录,设置页面访问的跳转页 转载自:http://blog.csdn.net/yixiao_naihe/article/details/26679515. 目的: 1.访问fm.htm ...

  8. cookie记住用户名密码

    <script src="js/jquery.cookie.js" type="text/javascript"></script> $ ...

  9. JS利用cookie记录当前位置实现刷新页面后还可以保持菜单栏的展开或闭合

    代码如下,重点是JS部分的代码(部分样式引用的是Bootstrapt中的):   <style> .sidebar-menu .special{ font-size: 16px; marg ...

随机推荐

  1. Overview of the Oppia codebase(Oppia代码库总览)

    Oppia is built with Google App Engine. Its backend is written in Python, and its frontend is written ...

  2. JAVA用途

    在现今阶段,最有前途的开发语言当属Java,Java语言是跨平台的,Write Once,Run Anywhere是Java的一句口号,学Application编程,可以在计算机上写程序,学Apple ...

  3. [Struts2] Action Implements SessionAware

    struts2 的Action中若希望访问Session对象,可采用两种方式: 1.从ActionContext中获取: 2.实现SessionAware接口. 1.从ActionContext中获取 ...

  4. hbuilder的使用

    今天在群里看群友提及了hbuilder,下载试了下,发现确实会有些代码敲起来方便多了.也帮助我自己发现uft8和保存的时候选择字符重要,不然乱码,很窝心.

  5. font-family:“微软雅黑” OR font-family:Microsoft Yahei

    sublime对中文编码支持的不好,可以考虑用后者.

  6. ECshop后台角色权限的添加和分配

    1.在权限文件中配置 2.在需要加权限的文件中加入权限. 例如:d:\ecshop\admin\user_account.php 3.在数据库表 ecs_admin_action中配置 4.会员权限 ...

  7. robots.txt文件没错,为何总提示封禁

    大家好,我的robots.txt文件没错,为何百度总提示封禁,哪位高人帮我看看原因,在此谢过. 我的站点www.haokda.com,robots.txt如下: ## robots.txt for P ...

  8. hdu2068RPG的错排

    Problem Description 今年暑假杭电ACM集训队第一次组成女生队,其中有一队叫RPG,但做为集训队成员之一的野骆驼竟然不知道RPG三个人具体是谁谁.RPG给他机会让他猜猜,第一次猜:R ...

  9. xshell5激活

    Xshell是一个用于MS Windows平台的强大的SSH,TELNET,和RLOGIN终端仿真软件.它使得用户能轻松和安全地从Windows PC上访问Unix/Linux主机.以上内容全部为广告 ...

  10. jquery阻止冒泡事件行为发生

    <div onclick="a()"> <p onclick="b()"></p> </div> div和p元素 ...