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 相关文章推荐
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
JavaScript构造函数详解
Dec 27 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
vue v-model的用法解析
Oct 19 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判断访问IP的方法
2015/06/19 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
vue二级路由设置方法
2018/02/09 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
介绍Python的@property装饰器的用法
2015/04/28 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
用python计算文件的MD5值
2020/12/23 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
让世界充满爱演讲稿
2014/05/24 职场文书
超市理货员岗位职责
2014/07/04 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
钱学森电影观后感
2015/06/04 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
JavaScript实现登录窗体
2021/06/22 Javascript