javascript 中Cookie读、写与删除操作

 更新时间:2017年03月29日 10:44:58   投稿:lqh  
这篇文章主要介绍了javascript 中Cookie读、写与删除操作的相关资料,需要的朋友可以参考下

 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的解读。

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

相关文章

  • HTTP状态代码以及定义(解释)

    HTTP状态代码以及定义(解释)

    HTTP状态代码以及定义(解释)...
    2007-02-02
  • JavaScript学习笔记之JS函数

    JavaScript学习笔记之JS函数

    这篇文章主要简单介绍下javascript中函数的概念以及函数的参数、返回值、局部变量、全局变量以及示例分享,是篇非常不错的文章,推荐给大家学习下。
    2015-01-01
  • JavaScript中的anchor()方法使用详解

    JavaScript中的anchor()方法使用详解

    这篇文章主要介绍了JavaScript中的anchor()方法使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • input按钮的事件处理大全

    input按钮的事件处理大全

    input按钮的事件处理大全,收集的是网页中常用的一些事件处理,需要的朋友可以收藏下。
    2010-12-12
  • javascript下for循环用法小结

    javascript下for循环用法小结

    javascript下for循环用法小结...
    2007-07-07
  • Javascript基础教程之变量

    Javascript基础教程之变量

    大家都知道javascript是可以隐式声名变量的。但要注意,隐式声名变量总是被创建为全局变量。看以下代码,情愿javascript语言强制声明变量。建议大家一定要var声明变量。
    2015-01-01
  • javascript中this指向详解

    javascript中this指向详解

    this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象,接下来我会深入的探讨这个问题。
    2016-04-04
  • document.getElementBy("id")与$("#id")有什么区别

    document.getElementBy("id")与$("#id")有什么区

    有朋友问document.getElementBy("id")与$("#id")的区别,其实第一个就是js中获取对象的方法, 第二个是通过自定义函数方便调用,而第三个是jquery中获取id对象的方法
    2013-09-09
  • JavaScript函数节流和函数去抖知识点学习

    JavaScript函数节流和函数去抖知识点学习

    这篇文章给大家分享了JavaScript函数节流和函数去抖的相关的知识点内容,有需要的朋友们可以学习参考下。
    2018-07-07
  • javascript 实现 原路返回

    javascript 实现 原路返回

    这篇文章主要介绍了javascript 实现原路返回的方法,需要的朋友可以参考下
    2015-01-01

最新评论