一、什么是 cookie?
cookie 就是页面用来保存信息,比如自动登录、记住用户名等等。
二、cookie 的特点
1.同个网站中所有的页面共享一套 cookie
2.cookie 有数量、大小限制
3.cookie 有过期时间
三、如何使用 cookie?
通过 document.cookie 来写入 cookie
- <!DOCTYPE HTML>
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title>cookie基础</title>
- </head>
- <body>
-
- </body>
- </html>
- <script type="text/javascript">
- document.cookie = 'username=abc';
- document.cookie = 'password=123';
- document.cookie = 'email=abcdef@123.com';
- </script>
复制代码
打开浏览器查看 cookie,可以发现新定义的 cookie 并不会将原来的覆盖。
如果没有设置过期时间,那么关闭浏览器就会清空 cookie。如何设置过期时间呢?答案是:expires。一般我们会结合 Date 对象来使用。
- var d = new Date();
- d.setTime(d.getTime() + 1 * 3600 * 1000);
- document.cookie = 'username=abc; expires=' + d.toGMTString();
复制代码
我们可以通过火狐浏览器看到,username 的过期时间是当前时间的 1 小时后。
最后对获取 cookie 的方法进行封装:
- function setCookie(name,value,hours){
- var d = new Date();
- d.setTime(d.getTime() + hours * 3600 * 1000);
- document.cookie = name + '=' + value + '; expires=' + d.toGMTString();
- }
复制代码
学会了如何设置 cookie,那么该如何读取 cookie 呢?
首先我们看下 cookie 里的内容是什么类型?
- document.cookie = 'username=abc';
- document.cookie = 'password=123';
- document.cookie = 'email=abcdef@123.com';
- typeof document.cookie; //string
- alert(document.cookie); //'username=abc; password=123; email=abcdef@123.com'
复制代码
得到的是一串字符串,需要注意的是,每个 ; 后面都有个空格。
那么我们如何取到具体的数值呢?附上代码:
- function getCookie(name){
- var arr = document.cookie.split('; ');
- for(var i = 0; i < arr.length; i++){
- var temp = arr[i].split('=');
- if(temp[0] == name){
- return temp[1];
- }
- }
- return '';
- }
复制代码
除了设置、获取 cookie,我们还可以删除 cookie。我们在网上经常看到有清除用户名这样的功能,其实就是用到了清除 cookie。
清除 cookie 其实很简单,只要使过期时间为过去时间就可以了。
- function removeCookie(name){
- var d = new Date();
- d.setTime(d.getTime() - 10000);
- document.cookie = name + '=1; expires=' + d.toGMTString();
- }
复制代码
最后我们将设置、获取、清除 cookie 封装成一个 cookie.js
- function setCookie(name,value,hours){
- var d = new Date();
- d.setTime(d.getTime() + hours * 3600 * 1000);
- document.cookie = name + '=' + value + '; expires=' + d.toGMTString();
- }
- function getCookie(name){
- var arr = document.cookie.split('; ');
- for(var i = 0; i < arr.length; i++){
- var temp = arr[i].split('=');
- if(temp[0] == name){
- return temp[1];
- }
- }
- return '';
- }
- function removeCookie(name){
- var d = new Date();
- d.setTime(d.getTime() - 10000);
- document.cookie = name + '=1; expires=' + d.toGMTString();
- }
复制代码
PS:附上 cookie 应用的小实例。点击这里
http://bbs.html5cn.org/thread-86790-1-1.html
分享到:
相关推荐
本文实例讲述了javascript cookie基础应用之记录用户名的方法。分享给大家供大家参考,具体如下: 前面有一篇关于cookie基础的文章,封装了 cookie.js,下面我们通过一个实例来应用这个 js。 最常见的就是记住用户名...
本文实例讲述了javascript cookie用法。分享给大家供大家参考,具体如下: 一、什么是 cookie? ... 二、cookie 的特点 同个网站中所有的页面共享一套 cookie cookie 有数量、大小...cookie基础</title> </head
书中从javascript 语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jquery 框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入...
书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入探讨...
言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版 的基础上新增了两章,讲述jQuery 框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入探讨了 JavaScript ...
书中从javascript 语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jquery 框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入...
JavaScript进阶基础-3 6.面向对象基础 7.前后端交互 8.cookie解决http的无状态请求 9.jsonp解决跨域问题
cookie,简单的理解。就是存储数据。通过cookie,数据可以长期保存,不随着浏览器的关闭而消失。 本文有助于初学者加深对cookie的理解,个人总结,不足之处欢迎随时交流。
言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版 的基础上新增了两章,讲述jQuery 框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入探讨了 JavaScript ...
2 JavaScript语法基础 6 2.1 值、变量与常量 6 2.1.1 值 6 2.1.2 变量 6 2.1.3 常量 7 2.2 运算符与表达式 7 2.2.1 表达式 7 2.2.2 操作数 7 2.2.3 运算符 7 2.3 流程控制语句 8 2.3.1 if…else…控制结构 8 2.3.2 ...
Javascript完全学习手册内容简介:本书分4篇14章,介绍Javascript的知识,全书内容包括:Javascript语法基础、流程控制、函数、内置对象编程、文档对象模型DOM与事件驱动、处理XML、使用Cookie和...
JavaScript对象,数组,字符串,使用正则表达式操纵字符串,客户端,控制文档结构的模型,JavaScript事件驱动模型,CSS,Cookie,XML和JSON,Ajax,深入JavaScript面向对象编程,深入JavaScript函数式编程,深入...
javascript操作cookie_获取与修改代码,跟以前的方法有所进步,者使用类的方法。
主要介绍了JavaScript操作Cookie详解,本文讲解了什么是Cookie、Cookie基础知识、Cookie常见问题、cookie 有两种清除方式、Cookie基础用法、Cookie高级用法等内容,需要的朋友可以参考下
第二篇专门介绍javascript中内置对象的应用,内容包括javascript对象基础、窗口和框架、屏幕和浏览器对象、文档对象、历史对象和地址对象、表单对象和表单元素和脚本化cookie等。第三篇讲解的是javascript的高级技术...
本书从javascript 的编程结构开始,循序渐进地讲述了javascript 及相关的css、w3c dom、cookie、正则表达式和匹配模式,以及功能强大的ajax。书中采用了大量课堂实践示例,附以详尽的代码行解释和实际结果输出,将...
第1篇 JavaScript基础篇 第1章 JavaScript简介 1 1.1 JavaScript概述 1 1.1.1 什么是JavaScript 1 1.1.2 JavaScript的基本特点 2 1.1.3 常用的Web开发语言 3 1.2 JavaScript的应用 4 1.2.1 客户端应用 5 1.2.2 ...
第二篇专门介绍Javascript中内置对象的应用,内容包括Javascript对象基础、窗口和框架、屏幕和浏览器对象、文档对象、历史对象和地址对象、表单对象和表单元素和脚本化cookie等。第三篇讲解的是Javascript的高级技术...