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 相关文章推荐
js几秒以后倒计时跳转示例
Dec 26 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
vue组件间通信解析
Mar 01 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
微信小程序入门之绘制时钟
Oct 22 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP发送短信代码分享
2015/08/11 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
python分割列表(list)的方法示例
2017/05/07 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
python Pillow图像处理方法汇总
2019/10/16 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
Python调用Redis的示例代码
2020/11/24 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
初三物理教学反思
2014/01/21 职场文书
元旦趣味活动方案
2014/08/22 职场文书
财务总监岗位职责
2015/02/03 职场文书
服务员岗位职责范本
2015/04/09 职场文书
建房合同协议书
2016/03/21 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android