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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
慎用 somefunction.prototype 分析
Jun 02 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
layui文件上传实现代码
May 20 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
谈谈对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 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
浅谈php7的重大新特性
2015/10/23 PHP
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
Js四则运算函数代码
2012/07/21 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
opencv+python实现均值滤波
2020/02/19 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
伦敦一卡通:The London Pass
2018/11/30 全球购物
机电专业毕业生求职信
2013/10/27 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
《分一分》教学反思
2014/04/13 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书