javascript创建、读取或者删除cookie简单介绍

2023-12-04 13:49:43 前端笔记 54 3

本章节介绍一下如何使用javascript来操作cookie。

因为cookie在实际应用中有着重要的作用，并且简单可行，虽然安全性有点问题。

但是基本的场面还是能够撑住的，下面做一下简单介绍:

一.设置Cookie:

function setCookie(name,value) {
  document.cookie = name + '=' + escape(value);
}

若不设置过期时间，默认为会话级Cookie，浏览器关闭就会失效。

function setCookie(name,value){
  var Days = 30;
  var exp = new Date();
  exp.setTime(exp.getTime() + Days*24*60*60*1000);
  document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

上面的代码可以设置一个固定的过期时间。

//设置自定义过期时间cookie
function setCookie(name,value,time){
  var msec = getMsec(time); //获取毫秒
  var exp = new Date();
  exp.setTime(exp.getTime() + msec*1);
  document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//将字符串时间转换为毫秒,1秒=1000毫秒
function getMsec(DateStr){
  var timeNum=str.substring(0,str.length-1)*1; //时间数量
  var timeStr=str.substring(str.length-1,str.length); //时间单位前缀，如h表示小时
  //20s表示20秒
  if (timeStr=="s") {
    return timeNum*1000;
  }
  //12h表示12小时
  else if (timeStr=="h"){
    return timeNum*60*60*1000;
  }
  else if (timeStr=="d"){
    return timeNum*24*60*60*1000; //30d表示30天
  }
}

上面的代码可以灵活的设置过期时间。

二.读取Cookie:

function getCookie(name){
  var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); //正则匹配
  if(arr=document.cookie.match(reg)){
    return unescape(arr[2]);
  }
  else{
    return null;
  }
}

三.删除Cookie:

function delCookie(name){
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval=getCookie(name);
  if(cval!=null){
    document.cookie= name + "="+cval+";expires="+exp.toGMTString();
  }
}