`

js操作cookie实现记住密码功能

阅读更多

【什么是cookie】

“cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。”

                                                                        ——w3school

不同的浏览器可能对cookie的储存方式不同,但是相同的是cookie中的内容都是保存在客户一端的。(session是保存在服务器上的)

 

【cookie的几点注意】

说的通俗一点,cookie就是一个字符串(这点可以用alert(typeof document.cookie)来验证),用来保存一些客户信息。

程序员可以对其写入任何想写入的东西,只要不超过cookie的大小限制(4kb)。

cookie的操作办法最简单的说法就是对document.cookie进行操作(写入你要需保存的内容)。

cookie有一个关键字是expires,它是用来设置cookie的有效期的,默认情况(不设置expires)是当浏览器关闭的时候,自动清除cookie。

一般来说,cookie的形式都是这样的:"cookieName1=cookie1;cookieName2=cookie2;expires=" + date,这里需要注意几点:

1.注意分号

";expires="之前的字符串你可以随便写,但是";expires="必须遵循这个写法,尤其是这个分号不能少,不然浏览器是认不出你的expires(过期时间),而把它当成cookie内容的一部分。

例如:

如果你写成

复制代码
 1 <html>
 2     <head>
 3         <script type="text/javascript">
 4             var date = new Date();
 5             date.setDate(date.getDate() + 10);  //date设置为十天之后
 6             document.cookie = "username=findingsea^password=123^expires=" + date.toGMTString();  //toGMTString方法将date转换成格林尼治时间格式
 7         </script>
 8     </head>
 9     <body>
10         
11     </body>
12 </html>
复制代码

打开firefox下的选项-->隐私-->删除私人Cookie

可以到cookie过期的时间为当前会话结束时,也就是浏览器关闭的时候。换而言之,就是我们设置的expires完全没有起作用。

要fix也很容易,只要在上段代码中,在expires前加一个分号,也就是改成"...^;expires=",重新运行firefox查看cookie

可以看到过期时间为10之后(今天是2012年8月31日),expires设置成功,所以说分号很重要,很重要!!!

2.如何清除cookie

其实清除cookie这种说法是不准确的,应该是说让cookie过期。因为不能直接对cookie置空,(如果以为document.cookie="",这样就能清空cookie,我只能说少年你还是太天真了),而使cookie的方法也很简单,就是设置expires。我们可以把expires设置到很久以后,让cookie能长期保存,那同样我们也能把cookie设置到过去,让cookie马上过期。这个“过去”就是1970年1月1号,我们将expires设置到这个时间,cookie就过期了。至于为什么是这个时间,请参考关于1970-1-1 00:00.000的知识 。

3.如何设置和获取cookie

<在一条cookie中设置多个变量>

JavaScript没有提供根据cookie名来获取cookie值的方法。上面已经讲过了,document.cookie只是一个字符串而已,我们就对其进行字符串解析即可。要在获取的时候进行解析,就要需要在设置的时候设置标识符,这里需要注意的点和第一点刚好相反,在第一点中,我们是千叮咛万嘱咐不要忘记分号,而且在设置标识符的时候,我建议尽量不要用分号当做分隔符,我们来看一下对比;

代码1:

复制代码
 1 <html>
 2     <head>
 3         <script type="text/javascript">
 4             var date = new Date();
 5             date.setDate(date.getDate() + 10);
 6             document.cookie = "username=findingsea;password=123;expires=" + date.toGMTString();
 7         </script>
 8     </head>
 9     <body>
10         
11     </body>
12 </html>
复制代码

效果:

代码2:

复制代码
 1 <html>
 2     <head>
 3         <script type="text/javascript">
 4             var date = new Date();
 5             date.setDate(date.getDate() + 10);
 6             document.cookie = "username=findingsea^password=123^;expires=" + date.toGMTString();
 7         </script>
 8     </head>
 9     <body>
10         
11     </body>
12 </html>
复制代码

效果:

可以很清楚地看到,代码1中的password=123都“吞掉了”,造成这个现象的原因是,浏览器在保存cookie的时候,在读到分号之后,就认为cookie的内容结束了,浏览器理想的cookie形式是"cookieName=cookie;expires=date",但是显然我们并不满足这样,所以要在一条cookie中设置多个值,就需要像代码2这样用标示符(不要分号)进行分割。然后在读取的时候,也根据标示符进行逐个读取。

<设置多个cookie>

当然当然当然,以上是正对相对复杂的需要我们在同一条cookie中设置多个变量的情况,更规范的情况是一条cookie就储存一个对象。不过这样的话,你的cookie就要占用更多的空间(相比于一条cookie中设置多个变量而已,因为你需要为每个cookie都设置一个expires)。不过这样的操作更加简单和规范,推荐在变量少的情况下使用。

代码如下:

复制代码
 1 <html>
 2     <head>
 3         <script type="text/javascript">
 4             var date = new Date();
 5             date.setDate(date.getDate() + 10);
 6             document.cookie = "username=findingsea;expires=" + date.toGMTString();
 7             document.cookie = "password=123;expires=" + date.toGMTString();
 8             alert(document.cookie)
 9         </script>
10     </head>
11     <body>
12         
13     </body>
14 </html>
复制代码

效果:

那这时候document.cookie里的值是多少?让我们alert一下:

这个时候,你再去解析cookie的时候,就要用分号作为分隔符了。

4.如何修改cookie

document.cookie虽然是一个字符串,但是当你对它的内容进行修改的时候,浏览器先进行解析和查询,而不是直接的覆盖和修改。如果你要修改的cookie已经存在,那浏览器就对已存在的那个cookie进行修改,否则,浏览器会按照你的cookie名和cookie值新建一个cookie。

代码:

复制代码
 1 <html>
 2     <head>
 3         <script type="text/javascript">
 4             var date = new Date();
 5             date.setDate(date.getDate() + 10);
 6             document.cookie = "username=findingsea;expires=" + date.toGMTString();
 7             document.cookie = "username=ly;expires=" + date.toGMTString();
 8             document.cookie = "password=123;expires=" + date.toGMTString();
 9             alert(document.cookie)
10         </script>
11     </head>
12     <body>
13         
14     </body>
15 </html>
复制代码

效果:

可以看到当遇到之间已经定义过的cookie(username),浏览器会自己修改原来储存的值,而如果该cookie之间没有定义过(password),浏览器则会创建一个新的cookie。

5.chrome不支持本地cookie

chrome处于安全性考虑,不需要设置本地cookie,而需要用online-cookie。类似document.cookie=blablabla这样的代码在chrome下是无效的,cookie里还是空的,我也是上网上找了很多方法,都说要用online-cookie,但是也没人告诉我online-cookie到底要怎么用。所以这个问题至今没有解决,不过我会继续找解决办法,等我找到了再更新上来。

<-- 8月31日14:36更新 -->

感谢知乎大神对我这个弱智问题的不吝赐教,原帖地址。在此我犯了一个比较2的错误,chrome不支持本地cookie的意思是,不支持通过文件路径访问的js的cookie,就好比我写个html文件放在本地,里面有创建cookie的代码,直接用chrome打开这个html文件,创建cookie的代码是不会执行成功的,因为chrome阻止了对document.cookie的赋值。想要解决这个问题也很简单,就是通过127.0.0.1来访问同一个文件,那你创建cookie的js代码就能正常执行了。

 

【talk is cheap, show me the code.】

OK,上code!(代码来自w3school的js操作cookie教程,经本人整理和个性化:))

复制代码
 1 <!-- 记住密码 -->
 2 <html>
 3 <head>
 4 <script type="text/javascript">
 5 
 6 function getCookie(c_name)      //根据分隔符每个变量的值
 7 {
 8     if (document.cookie.length > 0) {
 9         c_start = document.cookie.indexOf(c_name + "=")
10         if (c_start != -1) { 
11             c_start = c_start + c_name.length + 1;
12             c_end = document.cookie.indexOf("^",c_start);
13             if (c_end==-1)
14                 c_end=document.cookie.length;
15             return unescape(document.cookie.substring(c_start,c_end));
16     } 
17   }
18     return "";
19 }
20 
21 function setCookie(c_name, n_value, p_name, p_value, expiredays)        //设置cookie
22 {
23     var exdate = new Date();
24     exdate.setDate(exdate.getDate() + expiredays);
25     document.cookie = c_name + "=" + escape(n_value) + "^" + p_name + "=" + escape(p_value) + ((expiredays == null) ? "" : "^;expires=" + exdate.toGMTString());
26     console.log(document.cookie)
27 }
28 
29 function checkCookie()      //检测cookie是否存在,如果存在则直接读取,否则创建新的cookie
30 {
31     alert(document.cookie)
32     var username = getCookie('username');
33     var password = getCookie('password');
34     if (username != null && username != "" && password != null && password != "") {
35         alert('Your name: ' + username + '\n' + 'Your password: ' + password);
36     }
37     else {
38         username = prompt('Please enter your name:',"");
39         password = prompt('Please enter your name:',"");
40         if (username != null && username != "" && password != null && password != "")
41         {
42             setCookie('username', username, 'password', password, 365);
43         }
44     }
45     alert(document.cookie)
46 }
47 
48 function cleanCookie (c_name, p_name) {     //使cookie过期
49     document.cookie = c_name + "=" + ";" + p_name + "=" + ";expires=Thu, 01-Jan-70 00:00:01 GMT";
50 }
51 </script>
52 </head>
53 
54 <body onLoad="checkCookie()">
55 </body>
56 </html>
分享到:
评论

相关推荐

    jsp+servlet+Cookie实现记住密码功能

    在Web开发中,"jsp+servlet+Cookie实现记住密码功能"是一个常见的需求,尤其是在构建用户登录系统时。本文将深入探讨这一技术栈如何协同工作,帮助用户在下次访问时自动填充登录信息,提升用户体验。 首先,JSP...

    通过js来设置cookie和读取cookie,实现登陆时记住密码的功能

    本文将详细讲解如何使用JavaScript(JS)来设置和读取cookie,从而实现登录时记住密码的功能。 首先,理解cookie的基本概念。Cookie是由服务器端生成,发送到客户端(浏览器),并存储在本地的一种小数据片段。它...

    JS读取cookie(记住账号密码)

    接下来,我们将详细解析这一过程,包括cookie的基本概念、如何设置和获取cookie以及如何在实际应用中实现记住密码的功能。 ### Cookie基本概念 Cookie是一种小型文本数据,它存储于用户的本地浏览器中,由服务器...

    Javascript实现登录记住用户名和密码功能

    Javascript实现登录记住用户名和密码功能的核心在于...以上内容综合了Javascript代码的使用、cookies操作以及*** MVC表单构建等知识点,实现了一个简单的登录记住用户名和密码的功能,并对其安全性进行了基本的考虑。

    jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    总结来说,`jquery.cookie.js`简化了JavaScript中的Cookie操作,使得在网页应用中实现诸如记住密码等特性变得更加便捷。正确使用该插件,可以提升用户体验,同时需要注意处理好用户隐私和数据安全。

    js中利用cookie实现记住密码功能

    在JavaScript中实现记住密码功能,通常会利用浏览器提供的cookie机制。cookie是一种在客户端存储数据的技术,它可以保存用户的某些信息,如用户名和经过加密的密码,以便用户下次访问时能够自动填充表单。以下是对...

    Cookie记住用户名密码

    总的来说,“Cookie记住用户名密码”功能结合了前端JavaScript和Cookie技术,为用户提供了一种方便的登录方式。在实施过程中,开发者需要考虑到安全性和用户体验,以创建一个既实用又安全的功能。

    利用js实现的记住密码功能

    利用js开发的记住密码功能,将用户输入存在浏览器的cookie中,经测试,在ie,ff和chrome均可用

    Cookie实现记住密码及解决中文乱码

    在Web开发中,"Cookie实现记住密码及...以上就是使用Cookie实现记住密码功能以及解决中文乱码问题的基本原理和操作方法。在实际开发中,还需要考虑安全性、跨域限制等因素,确保用户体验的同时,保护用户数据的安全。

    JavaScript使用cookie实现记住账号密码功能

    - 如果用户未选择"记住密码",则不设置密码的Cookie,或者立即删除已存在的密码Cookie。 - 当页面加载时(如`window.onload`事件触发),检查是否存在用户名的Cookie。如果有,自动填充用户名字段,并检查是否还有...

    cookie记住用户密码全部js写

    全部js,实现记住密码的功能。里面主要用的是cookie。

    js用cookie记住密码实例

    在网页应用中,为了提升用户体验,有时我们需要实现“记住密码”功能,这就是利用JavaScript来操作Cookie的一种常见应用场景。 Cookie是由服务器端设置,并存储在用户浏览器上的一小段文本数据。它主要用于存储用户...

    记住密码cookie js

    记住密码js 存储cookie记住密码记住密码js

    cookie记住账号密码

    标题中的“cookie记住账号密码”指的是在Web应用中,如何利用Cookie技术来实现用户登录状态的持久化,以便用户在下次访问网站时无需再次输入用户名和密码。这涉及到Web开发中的基本概念,主要包括Cookie的工作原理、...

    vue项目实现记住密码到cookie功能.zip

    以上就是使用Vue.js和Cookie实现“记住密码”功能的基本步骤。需要注意的是,由于密码明文存储在Cookie中存在安全风险,因此在实际应用中,应使用加密的方式存储密码,或者只存储一个标记(如token),并在后端验证...

    java cookie 读写,记住密码 自动登录

    本主题将详细讲解如何使用Java进行Cookie的读写操作,以及如何利用Cookie实现记住密码和自动登录功能。 1. **Cookie基本概念** Cookie是由服务器发送到用户浏览器并存储在本地的一小块数据,当用户再次请求同一...

    js 实现记住密码功能 js.cookie.min.js

    js.cookie.min.js

    通过cookie记住密码-HTML

    综上所述,通过HTML构建登录表单,JavaScript处理用户交互和设置Cookie,以及服务器端的配合,我们可以实现"通过cookie记住密码"的功能。然而,实现过程中必须考虑到用户隐私和数据安全,采取必要的安全措施。

Global site tag (gtag.js) - Google Analytics