javascript cookie用法基础教程(概念,设置,读取及删除)


Posted in Javascript onSeptember 20, 2016

本文实例讲述了javascript cookie用法。分享给大家供大家参考,具体如下:

一、什么是 cookie?

cookie 就是页面用来保存信息,比如自动登录、记住用户名等等。

二、cookie 的特点

同个网站中所有的页面共享一套 cookie

cookie 有数量、大小限制

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();
}

附:这里再补充一个关于cookie的基础应用:javascript cookie记录用户名

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
谈谈对JavaScript原生拖放的深入理解
Sep 20 #Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 #Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 #Javascript
js Canvas实现圆形时钟教程
Sep 19 #Javascript
Bootstrap模态框调用功能实现方法
Sep 19 #Javascript
javascript实现的上下无缝滚动效果
Sep 19 #Javascript
Angular ng-class详解及实例代码
Sep 19 #Javascript
You might like
删除数组元素实用的PHP数组函数
2008/08/18 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
javascript数组详解
2014/10/22 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
python使用tornado实现登录和登出
2018/07/28 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
python函数不定长参数使用方法解析
2019/12/14 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
客服专员岗位职责范本
2013/11/29 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
员工保密协议书
2014/09/27 职场文书
教师年度个人总结
2015/02/11 职场文书
评职称个人总结
2015/03/05 职场文书
计划生育工作总结2015
2015/04/03 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
Java设计模式之代理模式
2022/04/22 Java/Android