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

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

赞 (0)

相关推荐

  • PHP如何读取由JavaScript设置的Cookie

    cookie在开发中使用的非常多,但如果是使用JavaScript设置cookie然后使用PHP读取出来如何实现呢?即PHP与JavaScript下Cookie的交互使用是否可行呢? <?php // 读取JavaScript设置的cookie header("Content-type: text/html; charset=utf-8"); if(isset($_COOKIE["param"])){ echo $_COOKIE["param&quo

  • JS 设置Cookie 有效期 检测cookie

    设置cookie 函数直接上代码: function setCookie(name, value, days) { //设置cookie var d = new Date(); d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toUTCString(); document.cookie = name + "=" + value + ";

  • JS中cookie的使用及缺点讲解

     什么是Cookie Cookie意为"甜饼",是由W3C组织提出,最早由Netscape社区发展的一种机制.目前Cookie已经成为标准,所有的主流浏览器如IE.Netscape.Firefox.Opera等都支持Cookie. 由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份.怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论谁访问都必须携带自己通行证.这样服务器就能从通行证上确认客户身份了.这就是Cookie的工作原理. Cookie实际上是一小段的文本信

  • javascript cookie的基本操作（添加和删除）

    javascript cookie的基本操作(添加和删除) 1.添加一个cookie:response.addCookie(Cookie c); 2.获取cookie集合: request.getCookies(); 3.新建一个cookie: new Cookie(String name,String value) - Cookie在构造的时候就需要设定好cookie的名字和值 4.获取cookie的名字:cookie.getName(); 5.获取cookie的值:cookie.getVal

  • js cookie实现记住密码功能

    本文为大家分享了js和jQuery记住密码功能的方法,具体如下 一. js 实现记住密码功能 html: <form id="form22" name="form22" action="checklogin.action" method="post" > <div class="username" style="margin-top:50px;"> <lab

  • JS使用cookie实现只出现一次的广告代码效果

    JS使用cookie实现只出现一次的广告代码效果

    我们上网经常会遇到第一次需要登录而之后不用再登录的网站的情况,其实是运用了Cookie 存储 web 页面的用户信息,Cookie 以名/值对形式存储,当浏览器从服务器上请求 web 页面时, 属于该页面的 cookie 会被添加到该请求中.服务端通过这种方式来获取用户的信息l. 今天的这个效果:第一次打开网页弹出一个广告框(js实现卷帘效果),关闭广告或刷新页面之后就不会再出现.由于往电脑里写cookie信息是服务器行为,只有访问网站,服务器才会向电脑里写cookie信息,由于现在只是普通网页

  • node.js平台下利用cookie实现记住密码登陆（Express+Ejs+Mysql）

    node.js平台下利用cookie实现记住密码登陆（Express+Ejs+Mysql）

    此内容需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.js博文: 1.下载Mysql数据库,安装并配置.创建用户表供登录使用: 2.node.js平台下Express的session与cookie模块包的配置:http://www.jb51.net/article/112190.htm 3.node.js平台下的mysql数据库配置及连接:http://www.jb51.net/article/110079.htm 完成前两步后需下载配置Ejs模

  • jquery.cookie.js的介绍与使用方法

    什么是 cookie? cookie 就是页面用来保存信息,比如自动登录.记住用户名等等. cookie 的特点 同个网站中所有的页面共享一套 cookie cookie 有数量.大小限制 cookie 有过期时间jquery.cookie.js 是一款轻量级的 cookie 插件,可以读取,写入和删除 cookie.本文主要针对 jquery.cookie.js 的用法进行详细的介绍. 使用方法: 设置 cookie: $.cookie('the_cookie', 'the_value');

  • javascript 中Cookie读、写与删除操作

     javascript 中Cookie读.写与删除操作 前言: 在这个前端横行的时候,页面之间的交互需要数据的传递,有的数据通过url传参的形式可以很好地解决,但是对于部分需要改变的参数,你如说从页面A到页面B选择数据,然后从页面B将数据再传到页面A(典型的栗子就是收货地址的选择),针对这一块我是通过存储cookie来解决的. 对于cookie的操作我给出了一些简单的封装,当然也借鉴了前辈们经验,自己糅合了一下,对于cookie的操作,无非是读写和删除,我们首先来看一下写的操作,有写才有读,进而

  • JavaScript中cookie工具函数封装的示例代码

    一. 语法 1.1 获取当前页面的所有cookie: var allCookies = document.cookie; allCookies 是一个字符串,其中包含了以分号分隔的cookie列表字符串 (即 key=value 键值对). 1.2 写一个新cookie: document.cookie = updatedCookie; updatedCookie是一个键值对形式的字符串.只能用这个方法一次设置或更新一个cookie,而且写入并不是覆盖,而是添加.例如: document.coo

  • javascript中cookie对象用法实例分析

    本文实例讲述了javascript中cookie对象用法.分享给大家供大家参考.具体如下: 属性 name          唯一必须设置的属性,表示cookie的名称 expires       指定cookie的存活周期,如不设置,浏览器关闭自动失效 path           决定cookie对于服务器对于其他网页的可用性,一般情况下,   cookie对同一目录下的所有页面都可用,当设置path属性后,cookie只对指定路径及子路径下的所有网页有效 domain           

  • javascript中对Date类型的常用操作小结

    javascript中对Date类型的常用操作小结 /** 3. * 日期时间脚本库方法列表: 4. * (1)Date.isValiDate:日期合法性验证 5. * (2)Date.isValiTime:时间合法性验证 6. * (3)Date.isValiDateTime:日期和时间合法性验证 7. * (4)Date.prototype.isLeapYear:判断是否闰年 8. * (5)Date.prototype.format:日期格式化 9. * (6)Date.stringToD

  • JavaScript中Cookie操作实例

    JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cookie数据). Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,并且该Cookie数据只允许被所访问的Web站点进行读取. Cookie文件的格式: NS:Cookie.txt IE:用户名@域名.txt 有两种类型的cookie: (1)持久性cookie,会被存储到客户端的硬盘上. (2)会话Cookie:不

  • JavaScript中Cookie的使用之如何设置失效时间

    目录 1.什么是Cookie? 1.1简介 1.2特点 2.JavaScript操作Cookie 2.1基础操作 2.2设置失效时间 总结 1.什么是Cookie? 1.1简介 主要用于存储访问过的网站数据,存储浏览器的信息到本地计算机中,用于客户端和服务器端的通讯 Cookie 是为了解决“如何记住用户信息”而发明的: 当用户访问网页时,他的名字可以存储在 cookie 中. 下次用户访问该页面时,cookie 会“记住”他的名字. 注意:如果浏览器完全禁止cookie,大多数网站的基本功能都

  • JavaScript中使用ActiveXObject操作本地文件夹的方法

    在Windows平台上, js可以调用很多Windows提供的ActivexObject,本文就使用js来实现文档处理, 和使用js编写ActiveX做一个简单介绍. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <t

  • JavaScript中运算符规则和隐式类型转换示例详解

    前言 本文主要给大家介绍了关于JavaScript运算符规则和隐式类型转换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 隐式类型转换 在 JavaScript 中,当我们进行比较操作或者加减乘除四则运算操作时,常常会触发 JavaScript 的隐式类型转换机制:而这部分也往往是令人迷惑的地方.譬如浏览器中的 console.log 操作常常会将任何值都转化为字符串然后展示,而数学运算则会首先将值转化为数值类型(除了 Date 类型对象)然后进行操作. 我们首先来

  • 在JavaScript中对HTML进行反转义详解

    在JavaScript中对字符串进行转义和反转义操作,常用的方法莫过于使用encodeURI (decodeURI).encodeURIComponent (decodeURIComponent)这几个方法,具体使用方法和区别. 但是如何在JavaScript中对HTML进行反转义操作呢?例如下面这段代码: var jsonData = { title: "<%= data.name? data.name : title %>", desc: "<%= da

  • JavaScript中的object转换函数toString()与valueOf()介绍

    JavaScript中,object转换为boolean的操作非常简单:所有的object转换成boolean后均为true:即使是new Boolean(false)这样的object在转换为boolean后仍然为true. 复制代码 代码如下: var x = new Boolean(false); if(x){   console.log("x is true"); } 在将object转换为string或者number时,JavaScript会调用object的两个转换函数:t

随机推荐