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 相关文章推荐
Jquery 插件开发笔记整理
Jan 17 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 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简单实现无限级分类的方法
2016/05/13 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
vue-router单页面路由
2017/06/17 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
vue构建动态表单的方法示例
2018/09/22 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
django+js+ajax实现刷新页面的方法
2017/05/22 Python
分析python切片原理和方法
2017/12/19 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
快速了解python leveldb
2018/01/18 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
python实现多进程通信实例分析
2019/09/01 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
公司放假通知范文
2015/04/14 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python