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 相关文章推荐
JQuery优缺点分析说明
Apr 10 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
VUE中使用MUI方法
Feb 12 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
vuex的使用步骤
Jan 06 Vue.js
谈谈对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 删除记录实现代码
2009/03/12 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php读取excel文件的简单实例
2013/08/26 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
对Python信号处理模块signal详解
2019/01/09 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
诚信考试倡议书
2014/04/15 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
公务员个人考察材料
2014/12/23 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
音乐剧猫观后感
2015/06/04 职场文书
会议简讯范文
2015/07/20 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
小学体育课教学反思
2016/02/16 职场文书