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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
js实现列表按字母排序
Aug 11 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
JS轻量级函数式编程实现XDM二
Jun 16 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/03/06 PHP
smarty简单入门实例
2014/11/28 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
js中设置元素class的三种方法小结
2011/08/28 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
pytorch中tensor的合并与截取方法
2018/07/26 Python
Python数据正态性检验实现过程
2020/04/18 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
电子商务专业自我鉴定
2013/12/18 职场文书
十八大闭幕感言
2014/01/22 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
数学教师个人总结
2015/02/06 职场文书
教师思想工作总结2015
2015/05/13 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫