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 相关文章推荐
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
html5调用摄像头截图功能
Jan 18 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的大小写敏感问题整理
2011/12/29 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php权重计算方法代码分享
2014/01/09 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
Python配置虚拟环境图文步骤
2019/05/20 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
python多进程使用函数封装实例
2020/05/02 Python
关于Python错误重试方法总结
2021/01/03 Python
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
档案接收函范文
2014/01/10 职场文书
教师党员整改措施
2014/10/24 职场文书
白酒代理协议书范本
2014/10/26 职场文书
毕业典礼邀请函
2015/01/31 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
庭外和解协议书
2016/03/23 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
vue组件vue-esign实现电子签名
2022/04/21 Vue.js