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还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
javascript包装对象实例分析
Mar 27 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
实例详解带参数的 npm script
May 28 Javascript
vue实现购物车加减
May 30 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 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
ThinkPHP之getField详解
2014/06/20 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python重新引入被覆盖的自带function
2014/07/16 Python
python根据京东商品url获取产品价格
2015/08/09 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
给排水专业应届生求职信
2013/10/12 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
租赁协议书范本
2014/04/22 职场文书
医学求职信
2014/05/28 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
先进学校事迹材料
2014/12/30 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
初中军训感言
2015/08/01 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers