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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
textContent在Firefox下与innerText等效的属性
May 12 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
JavaScript多线程详解
Aug 12 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 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实现建立多层级目录的方法
2014/07/19 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
php实例化一个类的具体方法
2019/09/19 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
提升Python程序运行效率的6个方法
2015/03/31 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
HTML的form表单和django的form表单
2019/07/25 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
什么是网络协议
2016/04/07 面试题
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
JAVA软件工程师测试题
2014/07/25 面试题
中学教师岗位职责
2013/11/26 职场文书
个人思想理论学习的自我鉴定
2013/11/30 职场文书
教师申诉制度
2014/01/29 职场文书
《尊严》教学反思
2014/02/11 职场文书
产品售后服务承诺书
2014/05/21 职场文书
工人先进事迹材料
2014/12/26 职场文书
医院病假条怎么写
2015/08/17 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
python基础之错误和异常处理
2021/10/24 Python