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 URL参数读取改进版
Jan 16 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
跟我学习javascript的循环
Nov 18 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
python中的字典使用分享
2016/07/31 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
用python爬取租房网站信息的代码
2018/12/14 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
Django工程的分层结构详解
2019/07/18 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
wxPython实现绘图小例子
2019/11/19 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
Python识别处理照片中的条形码
2020/11/16 Python
详解python的变量缓存机制
2021/01/24 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
学院书画协会部门岗位职责
2013/12/01 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
成事在人观后感
2015/06/16 职场文书
小学生班干部竞选稿
2015/11/20 职场文书