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 相关文章推荐
用javascript实现自定义标签
May 08 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
uniapp开发小程序的经验总结
Apr 08 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 文件类型判断代码
2009/03/13 PHP
php中几种常见安全设置详解
2010/04/06 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
Python urllib3软件包的使用说明
2020/11/18 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
考博专家推荐信模板
2013/12/02 职场文书
公司接待方案
2014/03/08 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
工作收入住址证明
2014/10/28 职场文书
世界文化遗产导游词
2015/02/13 职场文书
心灵点滴观后感
2015/06/02 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis