Opérations de lecture, écriture et suppression de cookies en javascript (tutoriel graphique)

Cet article présente principalement des informations pertinentes sur les opérations de lecture, d'écriture et de suppression de cookies en javascript

Opérations de lecture, d'écriture et de suppression de cookies en javascript

Avant-propos :

Lorsque le front-end est endémique, l'interaction entre les pages nécessite la transmission de données, et certaines données peuvent être bien résolues en passant des paramètres via une URL, mais pour certains paramètres qui doivent être modifiés, si vous sélectionnez les données de la page A à la page B, puis transférez les données de la page B à la page A (un exemple typique est la sélection de l'adresse de livraison), pour cette pièce j'utilise Résolu par stocker des cookies.

J'ai donné une encapsulation simple pour le fonctionnement des cookies. Bien sûr, je me suis également inspiré de l'expérience de mes prédécesseurs et je l'ai combiné moi-même. Le fonctionnement des cookies n'est rien d'autre que la lecture, l'écriture et la suppression. regardez d'abord les opérations d'écriture incluent l'écriture et la lecture, puis la suppression et d'autres opérations peuvent être effectuées.

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

Maintenant que nous avons l'opération d'écriture, jetons un coup d'œil à l'opération de lecture.

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

L'étape suivante consiste à supprimer le cookie. En fait, cette opération est très simple. Il suffit de configurer le cookie pour qu'il expire, et le cookie expirera automatiquement

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

Le. ci-dessus est le fonctionnement des cookies. Quelques opérations simples

Parlons ensuite de quelques problèmes approfondis liés aux cookies : les cookies inter-domaines

 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
  }

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Node.js+Koa Explication détaillée des étapes de mise en œuvre de l'authentification des utilisateurs JWT

Comment jQuery.i18n.properties implémente jsnormes internationales

Résumé de trois façons de charger dynamiquement des fichiers JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!