javascript 中Cookie讀、寫與刪除操作（圖文教學）

這篇文章主要介紹了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=&#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
  }

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

Node.js Koa實作JWT使用者認證步驟詳解

jQuery .i18n.properties如何實作js國際化標準

#動態載入JS檔三種方式總結

以上是javascript 中Cookie讀、寫與刪除操作（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！