js設置cookie數據倒序顯示

① js操作 Cookie 問題

<script language=javascript>
function GetCookieVal(offset)
//獲得Cookie解碼後的值
{
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

//---------------------------
function SetCookie(name, value)
//設定Cookie值
{
var expdate = new Date();
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
if(expires!=null) expdate.setTime(expdate.getTime() + ( expires * 1000 ));
document.cookie = name + "=" + escape (value) +((expires == null) ? "" : ("; expires="+ expdate.toGMTString()))
+((path == null) ? "" : ("; path=" + path)) +((domain == null) ? "" : ("; domain=" + domain))
+((secure == true) ? "; secure" : "");
}

//---------------------------------
function DelCookie(name)
//刪除Cookie
{
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires="+ exp.toGMTString();
}

//------------------------------------
function GetCookie(name)
//獲得Cookie的原始值
{
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen)
{
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return GetCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}

SetCookie("username1",99);
alert(GetCookie("username1"));
</script>

② JS 操作 cookies 的方法

在 JS(JavaScript) 操作cookies比較復雜，在 ASP 裡面我們只需要知道 cookie 的名稱、cookie 的值就行了，而 JS 裡面，我們面對的是 cookie 的字元串，你自己編寫這個字元串寫入客戶端，然後自己解析這個字元串。

一、從寫 cookie 說起。

var the_date = new Date("December 31, 2020");
var expiresDate = the_date.toGMTString();
document.cookie = "userDefineCSS=" + escape(title) + "; expires=" + expiresDate;

第一句是日期對象；

第二句將日期格式轉換成 GMT 格式；編者者： GMT 即格林威治標准時間，現在也稱 UTC 即全球標准時間。

第三句是將 cookie 內容寫入客戶端。

其中 expires 是系統使用的，表示 cookie 的失效日期（也可以省略），expires 不可讀。

escape 是對 cookie 值進行編碼，這是為了處理中文、空格等而設立的。

二、取 cookie 是比較簡單的。

function GetCSS()
{
var cookieStr = document.cookie; //取 cookie 字元串，由於 expires 不可讀，所以 expires 將不會出現在 cookieStr 中。

if (cookieStr == "")
{
return "main1"; //沒有取到 cookie 字元串，返回默認值
}

var cookieValue = cookieStr.split("; "); //將各個 cookie 分隔開，並存為數組，多個 cookie 之間用分號加空隔隔開，不過前面我們只使用了一個 cookie，它的值與 expires 之間也是用分號加空格隔開的
var varName = "userDefineCSS";
var startPos = -1;
var endPos = -1;
for (var i=0; i<cookieValue.length; i++)
{
startPos = cookieValue[i].indexOf(varName);
if (startPos != 0)
{
continue; //當前 cookie 不是名稱為 varName 的 cookie，判斷下一個 cookie
}
startPos += varName.length + 1; //當前 cookie 就是名稱為 varName 的 cookie，由於有等號，所以 +1
endPos = cookieValue[i].length;
var css = unescape(cookieValue[i].substring(startPos, endPos));
return css;
}

return "main1";
}

③ nodejs怎麼設置cookie

通過node.js建立了一個完整的網站不是一件容易的事，這涉及讀取頁面模板，從資料庫中抽出數據構建成新的頁面返回給客戶端。但光是這樣還不行，我們還要設置首部，在chrome中如果CSS沒有設置正確的Content-Type，會不起作用的。此處理還要考慮訪問量，要設置緩存，緩存不單單是把東西從內存中讀入讀出就行，這樣會撐爆電腦內存的，這用LRU演算法（最近最少用的數據會清空出內存）。基於Cookie與資料庫與URL重寫，我們發展出一個session機制用於在多個action中通信。對於不同的請求交由不同的action來處理，就要發展出路由機制與MVC系統，等等。我信後寫這些東西一點點寫出來，揭示newland.js中遇到的種種問題與解決方案。如果什麼都貪圖方便，直接上框架，對我們語言學習是非常不利的。

本文正如標題所說，是操作Cookie。下面是一個完整的例子：

varhttp = require('http');http.createServer(function(req, res) {// 獲得客戶端的CookievarCookies = {};req.headers.cookie && req.headers.cookie.split(';').forEach(function( Cookie ) {varparts = Cookie.split('=');Cookies[ parts[ 0 ].trim() ] = ( parts[ 1 ] || '').trim();});console.log(Cookies)// 向客戶端設置一個Cookieres.writeHead(200, {'Set-Cookie': 'myCookie=test','Content-Type': 'text/plain'});res.end('Hello World ');}).listen(8000);console.log('Server running at http://127.0.0.1:8000/');

如果去掉其中幾句，就是官方給出的例子，除了表明返回一個頁面多簡單外，一點用也沒有。

varhttp = require('http');http.createServer(function(req, res) {res.writeHead(200, {'Content-Type': 'text/plain'});res.end('Hello World ');}).listen(8000);console.log('Server running at http://127.0.0.1:8000/');

我們通過http.createServer的回調來處理所有請求與響應，因此什麼有用的東西都在它們上面。Cookie位於req對象的headers對象上，為一個字元串，通常為了方便我們將它們轉換成一個對象。

寫入一個Cookie其實就是在首部設置一個鍵值對，上面是簡單方式，它實際上可以這樣：

res.writeHead(200, {'Set-Cookie': ["aaa=bbb","ccc=ddd","eee=fff"],'Content-Type': 'text/plain'});

但真正使用時，我們的Cookie並非這樣簡單的的格式：

Set-Cookie: =[; =][; expires=][; domain=][; path=][; secure][; HttpOnly]

HttpOnly 屬性： 這是微軟對Cookie做的擴展。如果在Cookie中設置了"HttpOnly"屬性，那麼通過程序(JS腳本、Applet等)將無法讀取到Cookie信息，這樣能有效的防止XSS攻擊。

varhttp = require('http');http.createServer(function(req, res) {// 獲得客戶端的CookievarCookies = {};req.headers.cookie && req.headers.cookie.split(';').forEach(function( Cookie ) {varparts = Cookie.split('=');Cookies[ parts[ 0 ].trim() ] = ( parts[ 1 ] || '').trim();});console.log(Cookies)// 向客戶端設置一個Cookieres.writeHead(200, {'Set-Cookie': 'SSID=Ap4GTEq; Expires=Wed, 13-Jan-2021 22:23:01 GMT;HttpOnly ','Content-Type': 'text/html'});res.end('Hello World <script>console.log(document.Cookie)</script>');}).listen(8000);console.log('Server running at http://127.0.0.1:8000/');

然後多刷幾次頁面，我們發現我們還能在控制台看到SSID=Ap4GTEq這個屬性，但在前端我們看不到它（當然在firebug中能看到）。

Secure屬性： 當設置為true時，表示創建的 Cookie 會被以安全的形式向伺服器傳輸，也就是只能在 HTTPS 連接中被瀏覽器傳遞到伺服器端進行會話驗證，如果是 HTTP 連接則不會傳遞該信息，所以不會被竊取到Cookie 的具體內容。同上，在客戶端我們也無法在document.Cookie找到被設置了Secure=true的Cookie鍵值對。Secure屬性是防止信息在傳遞的過程中被監聽捕獲後信息泄漏，HttpOnly屬性的目的是防止程序獲取Cookie後進行攻擊。我們可以把Secure=true看成比HttpOnly更嚴格的訪問控制。

path屬性： 指定可訪問Cookie的目錄。例如："userId=320; path=/shop";就表示當前Cookie僅能在shop目錄下使用。

domain屬性： 指定可訪問Cookie的主機名.主機名是指同一個域下的不同主機，例如：www.google.com和gmail.google.com就是兩個不同的主機名。默認情況下，一個主機中創建的Cookie在另一個主機下是不能被訪問的， 但可以通過domain參數來實現對其的控制，其語法格式為："name=value; domain=CookieDomain";以google為例，要實現跨主機訪問，可以寫為： "name=value;domain=.google.com";這樣，所有google.com下的主機都可以訪問該Cookie。

Expires屬性：指定過期時間，格式為"name=value;; expires=GMT_String"; 其中GMT_String是以GMT格式表示的時間字元串，超過這個時間，Cookie將消失，不可訪問。例如：如果要將Cookie設置為10天後過期，可以這樣實現：

//獲取當前時間vardate=newDate();varexpireDays=10;//將date設置為10天以後的時間date.setTime(date.getTime()+expireDays*24*3600*1000);//將userId和userName兩個Cookie設置為10天後過期res.writeHead(200, {'Set-Cookie': "userId=828; userName=hulk; expire="+date.toGMTString();'Content-Type': 'text/html'});

Max-Age屬性： 個人感覺這個東西比Expires更好用，本來就是用於代替Expires，由於市面上的書你抄我，我抄你，都在抄舊知識，導致Expires還在使用。Max-Age的值 可以為正數，表示此Cookie從創建到過期所能存在的時間，以秒為單位，此Cookie會存儲到客戶端電腦，以Cookie文件形式保存，不論關閉瀏覽器或關閉電腦，直到時間到才會過期。 可以為負數，表示此Cookie只是存儲在瀏覽器內存里，只要關閉瀏覽器，此Cookie就會消失。maxAge默認值為-1。 還可以為0，表示從客戶端電腦或瀏覽器內存中刪除此Cookie。

Cookie面向的主要是伺服器，localstorage面向的是頁面端js。頁面所需的業務數據可以放在localstorage里，但是認證相關的信息還是需要放在Cookie里的。

Cookie的限制

一、瀏覽器允許每個域名所包含的 Cookie 數：

• Microsoft 指出 Internet Explorer 8 增加 Cookie 限制為每個域名 50 個，但 IE7 似乎也允許每個域名 50 個 Cookie（《Update to Internet Explorer』s Cookie Jar》）。

• Firefox 每個域名 Cookie 限制為 50 個。

• Opera 每個域名 Cookie 限制為 30 個。

• Safari/WebKit 貌似沒有 Cookie 限制。但是如果 Cookie 很多，則會使 header 大小超過伺服器的處理的限制，會導致錯誤發生。

二、當很多的 Cookie 被設置，瀏覽器如何去響應。除 Safari（可以設置全部Cookie，不管數量多少），有兩個方法：

• 最少最近使用（least recently used (LRU)）的方法：當 Cookie 已達到限額，自動踢除最老的 Cookie ，以使給最新的 Cookie 一些空間。 Internet Explorer 和 Opera 使用此方法。

• Firefox 很獨特：雖然最後的設置的 Cookie 始終保留，但似乎隨機決定哪些 Cookie 被保留。似乎沒有任何計劃（建議：在 Firefox 中不要超過 Cookie 限制）。

三、不同瀏覽器間 Cookie 總大小也不同：

• Firefox 和 Safari 允許 Cookie 多達 4097 個位元組, 包括名（name）、值（value）和等號。

• Opera 允許 Cookie 多達 4096 個位元組, 包括：名（name）、值（value）和等號。

• Internet Explorer 允許 Cookie 多達 4095 個位元組, 包括：名（name）、值（value）和等號。

註：多位元組字元計算為兩個位元組。在所有瀏覽器中，任何 Cookie 大小超過限制都被忽略，且永遠不會被設置。

最後讓我們看看newland.js是怎麼處理cookie的。

newland.js有個重要的對象叫httpflow，其實就是我的操作流flow的子類，它劫持了所有清求與響應。當一個請求過來時，框架就會new一個httpflow去處理它們。它有個patch方法，用於為操作流添加一些有用屬性與方法，而不像express.js那樣直接在原生對象上改。實現express.js現在的做法有點像Prototype.js，加之node.js的版本現在還沒有到1.0，因此API改動還很頻繁的。express.js的行為無異走鋼線。而把操作移到一個自定義對象就安全多了。

// 源馬見https://github.com/RubyLouvre/newland/blob/master/system/mvc.jshttp.createServer(function(req, res) {varflow = newFlow()//創建一個流程對象，處理所有非同步操作，如視圖文件的讀取、資料庫連接flow.patch(req, res)services.forEach(function(fn){fn(flow);//將攔截器綁到流程對象上});//...})

此外，httpflow還劫持res.writeHead，res.setHeader，目的為實現多次調用setCookie時而不相互覆蓋。

// 源馬見https://github.com/RubyLouvre/newland/blob/master/system/httpflow.jspatch: function(req, res){this.res = res;this.req = req;this.originalUrl = req.url;this.params = {};this.session = newStore(this)this.flash = function(type, msg){//。。。。。}varflow = this;varwriteHead = res.writeHead;varsetHeader = res.setHeader;flow._setHeader = setHeader;res.writeHead = function(){flow.fire('header');writeHead.apply(this, arguments);this.writeHead = writeHead;//還原}res.setHeader = function(field, val){varkey = field.toLowerCase()if( 'set-cookie'== key ) {vararray = typeofval == "string"? [val] : val;array.forEach(function(str){vararr = str.split("=");flow.addCookie(arr[0], arr[1])})} else{if('content-type'== key && this.charset) {val += '; charset='+ this.charset;}setHeader.call(this, field, val);}}}

此外操作流還有兩個有用的方法來添加或移除Cookie。

// 源馬見https://github.com/RubyLouvre/newland/blob/master/system/httpflow.jsaddCookie: function(name, val, opt){if(!this.resCookies){this.resCookies = {};this.resCookies[name] = [val, opt]this.bind("header", function(){vararray = []for(vari inthis.resCookies){vararr = this.resCookies[i];array.push( Cookie.stringify(i, arr[0], arr[1] ) )}this._setHeader.call(this.res, "Set-Cookie",array)})}else{this.resCookies[name] = [val, opt]}returnthis;},removeCookie: function(name){varcookies = Array.isArray(name) ? name : [ name ];cookies.forEach(function(cookie){this.addCookie(cookie,"", 0)},this);returnthis;},

實質上，經過上面的代碼，我們就好方便多次添加或刪除Cookie。個人認為用setHeader來操作（即使它已經被偷龍轉鳳還是不怎麼好用），大家還是用addCookie, removeCookie來干吧。這些操作會在用戶第一次調用當前的res.whireHead生效！

flow.addCookie("ACookie","xxxxxxxxxx");flow.addCookie("BCookie","yyyyyyyyy");flow.addCookie('rememberme', 'yes', { expires: 0, httpOnly: true})//鏈式寫法，同名cookie前者會覆蓋後者的，前端只生成「aaa=2; bbb=1」flow.addCookie("aaa",1).addCookie("aaa",2).addCookie("bbb",1).addCookie("bbb",1)flow.res.setHeader("Set-Cookie","user=aaa")flow.removeCookie("oldCookie")//傳入一個字元串數組，同時刪除多個cookieflow.removeCookie(["myCookie","uuer","newCookie"])

如果你想查看從客戶端來的cookie，那麼直接看flow.cookie好了，它會在途中調用一個get_cookie的服務，將原始的字元始形式轉換為一個對象。