JS设置cookie、读取cookie


Posted in Javascript onFebruary 24, 2016

JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。

而cookie是运行在客户端的,所以可以用JS来设置cookie。

js设置cookie方法汇总:

第一种:

<script>
//设置cookie
function setCookie(cname, cvalue, exdays) {
 var d = new Date();
 d.setTime(d.getTime() + (exdays*24*60*60*1000));
 var expires = "expires="+d.toUTCString();
 document.cookie = cname + "=" + cvalue + "; " + expires;
}
//获取cookie
function getCookie(cname) {
 var name = cname + "=";
 var ca = document.cookie.split(';');
 for(var i=0; i<ca.length; i++) {
  var c = ca[i];
  while (c.charAt(0)==' ') c = c.substring(1);
  if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
 }
 return "";
}
//清除cookie 
function clearCookie(name) { 
 setCookie(name, "", -1); 
} 
function checkCookie() {
 var user = getCookie("username");
 if (user != "") {
  alert("Welcome again " + user);
 } else {
  user = prompt("Please enter your name:", "");
  if (user != "" && user != null) {
   setCookie("username", user, 365);
  }
 }
}
checkCookie(); 
</script>

第二种:

<script>
//JS操作cookies方法!

//写cookies
function setCookie(c_name, value, expiredays){
 
var exdate=new Date();


exdate.setDate(exdate.getDate() + expiredays);


document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
 
}
 
//读取cookies
function getCookie(name)
{
 var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
 
 if(arr=document.cookie.match(reg))
 
  return (arr[2]);
 else
  return null;
}

//删除cookies
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();
}
//使用示例
setCookie('username','Darren',30) 
alert(getCookie("username"));
</script>

第三个例子

<html> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <head> 
  <script language="JavaScript" type="text/javascript"> 
   
   function addCookie(objName, objValue, objHours){//添加cookie 
    var str = objName + "=" + escape(objValue); 
    if (objHours > 0) {//为0时不设定过期时间,浏览器关闭时cookie自动消失 
     var date = new Date(); 
     var ms = objHours * 3600 * 1000; 
     date.setTime(date.getTime() + ms); 
     str += "; expires=" + date.toGMTString(); 
    } 
    document.cookie = str; 
    alert("添加cookie成功"); 
   } 
   
   function getCookie(objName){//获取指定名称的cookie的值 
    var arrStr = document.cookie.split("; "); 
    for (var i = 0; i < arrStr.length; i++) { 
     var temp = arrStr[i].split("="); 
     if (temp[0] == objName) 
      return unescape(temp[1]); 
    } 
   } 
   
   function delCookie(name){//为了删除指定名称的cookie,可以将其过期时间设定为一个过去的时间 
    var date = new Date(); 
    date.setTime(date.getTime() - 10000); 
    document.cookie = name + "=a; expires=" + date.toGMTString(); 
   } 
   
   function allCookie(){//读取所有保存的cookie字符串 
    var str = document.cookie; 
    if (str == "") { 
     str = "没有保存任何cookie"; 
    } 
    alert(str); 
   } 
   
   function $(m, n){ 
    return document.forms[m].elements[n].value; 
   } 
   
   function add_(){ 
    var cookie_name = $("myform", "cookie_name"); 
    var cookie_value = $("myform", "cookie_value"); 
    var cookie_expireHours = $("myform", "cookie_expiresHours"); 
    addCookie(cookie_name, cookie_value, cookie_expireHours); 
   } 
   
   function get_(){ 
    var cookie_name = $("myform", "cookie_name"); 
    var cookie_value = getCookie(cookie_name); 
    alert(cookie_value); 
   } 
   
   function del_(){ 
    var cookie_name = $("myform", "cookie_name"); 
    delCookie(cookie_name); 
    alert("删除成功"); 
   } 
  </script> 
 </head> 
 <body> 
  <form name="myform"> 
   <div> 
    <label for="cookie_name"> 
     名称 
    </label> 
    <input type="text" name="cookie_name" /> 
   </div> 
   <div> 
    <label for="cookie_value"> 
    值 
    </lable> 
    <input type="text" name="cookie_value" /> 
   </div> 
   <div> 
    <label for="cookie_expireHours"> 
    多少个小时过期 
    </lable> 
    <input type="text" name="cookie_expiresHours" /> 
   </div> 
   <div> 
    <input type="button" value="添加该cookie" onclick="add_()"/><input type="button" value="读取所有cookie" onclick="allCookie()"/><input type="button" value="读取该名称cookie" onclick="get_()"/><input type="button" value="删除该名称cookie" onclick="del_()"/> 
   </div> 
  </form> 
</body> 
</html>

注意:

chrome浏览器在本地获取不到cookie。必须在服务器上才可以。如果是本地的话,你可以放到local的www目录下面。

Google Chrome只支持在线网站的cookie的读写操作,对本地html的cookie操作是禁止的。所以下面的代码如果你写在一个本地的html文件中,将弹出的对话框内容为空。

document.cookie = "Test=cooo";
alert(document.cookie);

如果这个页面是在线网站的内容,则会正常显示cookie内容Test=cooo等等。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
JS高级运动实例分析
Dec 20 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 #Javascript
javascript cookie的简单应用
Feb 24 #Javascript
javascript的正则匹配方法学习
Feb 24 #Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 #Javascript
JavaScript设计模式经典之命令模式
Feb 24 #Javascript
JavaScript设计模式经典之工厂模式
Feb 24 #Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 #Javascript
You might like
深入PHP许愿墙模块功能分析
2013/06/25 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
select组合框option的捕捉实例代码
2008/09/30 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
js加强的经典分页实例
2013/03/15 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
python学生信息管理系统
2018/03/13 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
python怎么调用自己的函数
2020/07/01 Python
详解python metaclass(元类)
2020/08/13 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
新东网科技Java笔试题
2012/07/13 面试题
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
建筑专业自我鉴定
2013/10/22 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
预备党员半年考察意见
2015/06/01 职场文书
公司职员入党自传书
2015/06/26 职场文书
大学军训口号大全
2015/12/24 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL