javascript 中Cookie读、写与删除操作


Posted in Javascript onMarch 29, 2017

 javascript 中Cookie读、写与删除操作

前言:

在这个前端横行的时候,页面之间的交互需要数据的传递,有的数据通过url传参的形式可以很好地解决,但是对于部分需要改变的参数,你如说从页面A到页面B选择数据,然后从页面B将数据再传到页面A(典型的栗子就是收货地址的选择),针对这一块我是通过存储cookie来解决的。

对于cookie的操作我给出了一些简单的封装,当然也借鉴了前辈们经验,自己糅合了一下,对于cookie的操作,无非是读写和删除,我们首先来看一下写的操作,有写才有读,进而进行删除等操作。

/**
 * 设置COOKIE
 * @param name 设置cookie的属性名
 * @param value 设置cookie的属性值
 * @param time  设置cookie的时间
 */

function setCookie(name, value , time) {
  time = time ? parseFloat(time) : 0 ;
  var exp = new Date();
  exp.setTime(exp.getTime() + time);
  // escape 这种编码方式过时了 改用 encodeURIComponent
  // document.cookie = name + "=" + escape(value) + ";expires=" + (time ? exp.toGMTString() : 'session');
  document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + (time ? exp.toGMTString() : 'session');
}

我们有了写的操作了,那么我们再来看看对于读的操作。

/**
 * 获取cookie
 * @param name
 * @returns {null}
 */

function getCookie(name) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if (arr = document.cookie.match(reg))
    //unescape这种解码方式好像过时了,可以采用decodeURIComponent解码方式
    //return unescape(arr[2]);
     return decodeURIComponent(arr[2]);
  else
    return null;
}

接下就是对cookie的删除操作了,其实这个操作很简单,就是将cookie设置过期,cookie就自动失效了

/**
 * 删除cookie
 * @param name
 */

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();
}

以上就是对cookie的一些简单操作

接下来我们来谈一点cookie的深层次的问题:cookie的跨域

Js跨域同步cookie怎么实现
    document.cookie = "name=" + "value;" + "expires=" + "datatime;" + "domain=" + "" + "path=" + "/path" + "; secure";

/**
 * 删除cookie
 * value Cookie值
 * expires 有效期截至(单位毫秒)
 * path 子目录
 * domain 有效域
 * secure 是否安全
 */

<iframe src='http://网站:1234/test/Index' width='100' height='100' style="display:none"></iframe>

/*
*原页面js里 window.location = "http://另外一个网站:1234/GetCookie/Index?" + document.cookie;跳到另外一个站,另外一个站获取cookie,设置cookie
*/

 var url = window.location.toString();//获取地址
 var get = url.substring(url.indexOf("liuph"));//获取变量和变量值
 var idx = get.indexOf("=");//获取变量名长度
 if (idx != -1) {
    var name = get.substring(0, idx);//获取变量名
    var val = get.substring(idx + 1);//获取变量值
    setCookie(name, val, 1);//创建Cookie
  }

以上就是今天对cookie的解读。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! 

Javascript 相关文章推荐
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 #Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 #Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 #Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 #Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 #Javascript
js实现一个简单的数字时钟效果
Mar 29 #Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
You might like
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP数组操作类实例
2015/07/11 PHP
PHP如何使用Memcached
2016/04/05 PHP
PHP7常量数组用法分析
2016/09/26 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
JS实现按钮颜色切换效果
2020/09/05 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
Python  Django 母版和继承解析
2019/08/09 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
行政文员岗位职责
2013/11/08 职场文书
《猫》教学反思
2014/02/26 职场文书
中央空调节能方案
2014/06/15 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
病危通知书样本
2015/04/17 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
《实心球》教学反思
2016/02/23 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书