在说如何用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. Windows Phone 十六、HttpClient

    HttpClient 对象也可以实现网络请求 相对于 HttpWebRequest 对象来说,HttpClient 操作更简单,功能更强大 HttpClient 提供一系列比较简单的API来实现基本的 ...

  2. 【001：go语言的一些语法基础】

    1. 循环语句 Go只有for一个循环语句关键字,但支持3种形式 初始化和步进表达式可以是多个值 条件语句每次循环都会被重新检查,因此不建议在条件语句中 使用函数,尽量提前计算好条件并以变量或常量代替 ...

  3. 安装Ruby下的compress失败

    1.  安装ruby 1.9.3     进入ruby官网,点击下载,在下载页面有一个"安装页面"链接,进入之后找到RailsInstaller(windows ruby安装程序) ...

  4. Mvc4中使用Spring.Net实现IOC和DI

    一个Hello类,一个IHello接口 1.引用dll 2.修改Global文件 (SpringMvcApplication) 3.控制器添加属性 4.WebConfig配置 5.Spring.xml ...

  5. Eclipse快捷键

    http://www.blogjava.net/action/articles/17339.html http://blog.csdn.net/keenweiwei/article/details/3 ...

  6. python中函数接收多余参数

    代码: def fun(x): return x print fun(10) 函数fun(x)接受参数是x,传入数字"10",打印函数的返回值结果 就是10,如果我传递多个参数时, ...

  7. 浅谈 Scrapy 爬虫（二）

    越写越像官方文档的翻译,偏离了初衷.写一些官方文档里没有的内容吧.   在不限制宽带的环境下,根据页面的大小, Scrapy 一秒能爬取40-70个页面,一天在400万到600万页面.也就是说 Scr ...

  8. phpcms V9 栏目管理

    关于phpcms V9框架系统后台管理之栏目管理,请参见下文的源码分析(添加栏目和修改栏目): 参照添加栏目的界面图示,便于对源代码的理解: <?php // 文件路径:phpcms/modul ...

  9. Dynamics AX 2012 R2 AIF No Endpoint Behavior Named 'clientEndpointBehavior'

          最近,Reinhard在使用Http Adapter类型的AIF入站端口时,总是报以下错误: Server Error in '/MicrosoftDynamicsAXAif60' App ...

  10. 怎样获取Windows平台下SQL server性能计数器值

    转载自工作伙伴Garrett, Helen "SQL Server Performance Counter captures" Capturing Windows Performa ...