Cookie reading, writing and deletion operations in javascript (graphic tutorial)

This article mainly introduces the relevant information about cookie reading, writing and deleting operations in javascript. Friends in need can refer to it

Cookie reading, writing and deleting operations in javascript

Foreword:

When the front-end is rampant, the interaction between pages requires the transmission of data, and some data can be well solved by passing parameters through the URL. , but for some parameters that need to be changed, if you select data from page A to page B, and then transfer the data from page B to page A (a typical example is the selection of the delivery address), for this piece I use Solved by storing cookies.

I have given some simple encapsulation for the operation of cookies. Of course, I also drew on the experience of my predecessors and combined it myself. For the operation of cookies, it is nothing more than reading, writing and deleting. Let’s first look at writing. Operations include writing and reading, and then deletion and other operations can be performed.

/**
 * 设置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');
}

Now that we have the write operation, let’s take a look at the read operation.

/**
 * 获取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;
}

The next step is to delete the cookie. In fact, this operation is very simple. It is to set the cookie to expire, and the cookie will automatically expire.

/**
 * 删除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();
}

The above are some simple operations on cookies

Next let’s talk about some in-depth issues of cookies: Cross-domain cookies

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

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

<iframe src=&#39;http://网站:1234/test/Index&#39; width=&#39;100&#39; height=&#39;100&#39; 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
  }

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Node.js Detailed explanation of the steps to implement JWT user authentication in Koa

jQuery How .i18n.properties implements jsInternational standards

##Summary of three ways to dynamically load JS files

The above is the detailed content of Cookie reading, writing and deletion operations in javascript (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!