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 相关文章推荐
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
移动端利用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中批量替换文件名的实现代码
2011/07/20 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
JavaScript的parseInt 取整使用
2011/05/09 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python实现IOU计算案例
2020/04/12 Python
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
linux面试相关问题
2013/04/28 面试题
教育科学研究生自荐信
2013/10/09 职场文书
部队领导证婚词
2014/01/12 职场文书
农业开发项目建议书
2014/05/16 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
创先争优承诺书
2015/01/20 职场文书
新娘婚礼致辞
2015/07/27 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers