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 30 Javascript
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
详解vue组件基础
May 04 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
vue实现商品列表的添加删除实例讲解
May 14 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出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
JavaScript模块详解
2017/12/18 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
Python实现删除文件但保留指定文件
2015/06/21 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python内存管理机制原理详解
2019/08/12 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
满月酒答谢词
2014/01/14 职场文书
教师职称自我鉴定
2014/02/12 职场文书
2014年团工作总结
2014/11/27 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫