本文目錄一覽:
- 1、js操作cookie
- 2、js 怎麼重新設置cookie
- 3、nodejs怎麼設置cookie
- 4、js怎樣修改cookie的domain
- 5、JS 操作 cookies 的方法
- 6、前端本地存儲的 3 種方法 cookie、localStorage、sessionStorage
js操作cookie
//網頁引用
script language=”javascript”src=”./js/cookie.js”/script
//取cookie值
var hrckdeptcode = Cookie(“hrckdeptcode”);
var hrckdeptname = Cookie(“hrckdeptname”);
//保存cookie值
setCookie(“hrckdeptcode”, deptcode, expdate, “/”, null, false);
setCookie(“hrckdeptname”, deptname, expdate, “/”, null, false);
把下面的腳本放到 cookie.js 文件里
var expdate= new Date();
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (“;”, offset);
if (endstr == -1) endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function Cookie (name) {
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;
}
function setCookie (name,value,expires,path,domain,secure) {
expdate.setTime(expdate.getTime() + (24*60*60*1000*365));
document.cookie = name + “=” + escape (value) +
((expires) ? “; expires=” + expires.toGMTString() : “”) +
((path) ? “; path=” + path : “”) +
((domain) ? “; domain=” + domain : “”) +
((secure) ? “; secure” : “”);
}
function deleteCookie(name) {
expdate = new Date();
expdate.setTime(expdate.getTime() – (86400 * 1000 * 1));
setCookie(name, “”, expdate);
}
js 怎麼重新設置cookie
這個看你有沒有使用cookie的插件
如果使用,可以看看具體的插件使用指導
例如:不同的 系統可能會用不同的創建,像傲隆盛 jquery.cookie.js或者看如下的小案例:
1.生成一個cookie,名稱為user,內容為liayun:
$.cookie(“user”,”liayun”);
2.cookie的參數設置:
$.cookie(“user”,”liayun”, {
expires:7, //過期時間,7天後過期
path:”/”, //根目錄,path的作用就是設置路徑,根目錄到底所謂何???
});
$.cookie(“aaa”,”bbb”, {
//domain:”” //設置域名,可以發現名為aaa的cookie並沒有建立,為何???
secure:true //發送條件:僅限加密連接 默認為false,需要使用安全協議https
});
綜上所述,除了expires這個參數有用,其他根本就沒什麼鳥用!!!
3.讀取cookie數據:
alert($.cookie(“user”)); //liayun
alert($.cookie(“aaa”)); //undefined,名為aaa的cookie的參數secure為true,因為需要使用安全協議https,而我們一般使用http協議,所以返回undefined
$.cookie(“ccc”,””); //自動編碼為:%E6%9D%8E%E9%98%BF%E6%98%80
alert($.cookie(“ccc”)); //自動解碼為:
4.關閉編碼/解碼,默認為false:
$.cookie.raw = true;
$.cookie(“ddd”,””); //沒有自動編碼,
alert($.cookie(“ddd”)); //
5.讀取所有cookie數據:
alert($.cookie());
nodejs怎麼設置cookie
var http = require(‘http’);
http.createServer(function (req, res) {
// 獲得客戶端的Cookie
var Cookies = {};
req.headers.cookie req.headers.cookie.split(‘;’).forEach(function( Cookie ) {
var parts = Cookie.split(‘=’);
Cookies[ parts[ 0 ].trim() ] = ( parts[ 1 ] || ” ).trim();
});
console.log(Cookies)
// 向客戶端設置一個Cookie
res.writeHead(200, {
‘Set-Cookie’: ‘myCookie=test’,
‘Content-Type’: ‘text/plain’
});
res.end(‘Hello World\n’);
}).listen(8000);
console.log(‘Server running at ‘);
如果去掉其中幾句,就是官方給出的例子,除了表明返回一個頁面多簡單外,一點用也沒有。
var http = require(‘http’);
http.createServer(function (req, res) {
res.writeHead(200, {‘Content-Type’: ‘text/plain’});
res.end(‘Hello World\n’);
}).listen(8000);
console.log(‘Server running at ‘);
我們通過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]
console.log(‘Server running at ‘);
HttpOnly 屬性: 這是微軟對Cookie做的擴展。如果在Cookie中設置了”HttpOnly”屬性,那麼通過程序(JS腳本、Applet等)將無法讀取到Cookie信息,這樣能有效的防止XSS攻擊。
var http = require(‘http’);
http.createServer(function (req, res) {
// 獲得客戶端的Cookie
var Cookies = {};
req.headers.cookie req.headers.cookie.split(‘;’).forEach(function( Cookie ) {
var parts = Cookie.split(‘=’);
Cookies[ parts[ 0 ].trim() ] = ( parts[ 1 ] || ” ).trim();
});
console.log(Cookies)
// 向客戶端設置一個Cookie
res.writeHead(200, {
‘Set-Cookie’: ‘SSID=Ap4GTEq; Expires=Wed, 13-Jan-2021 22:23:01 GMT;HttpOnly ‘,
‘Content-Type’: ‘text/html’
});
res.end(‘Hello World\nscriptconsole.log(document.Cookie)/script’);
}).listen(8000);
console.log(‘Server running at ‘);
然後多刷幾次頁面,我們發現我們還能在控制台看到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的主機名.主機名是指同一個域下的不同主機,例如:和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天後過期,可以這樣實現:
js怎樣修改cookie的domain
無法修改,這個在哪個域生成的cookie,就是屬於哪個域的。cookie無法跨域讀取,就不用說修改所屬域了
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; icookieValue.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”;
}
前端本地存儲的 3 種方法 cookie、localStorage、sessionStorage
當網頁要發http請求時,瀏覽器會先檢查是否有相應的cookie,有則自動添加在request header中的cookie欄位中。這些是瀏覽器自動幫我們做的,而且每一次http請求瀏覽器都會自動幫我們做。這個特點很重要,因為這關係到「什麼樣的數據適合存儲在cookie中」。
存儲在cookie中的數據,每次都會被瀏覽器自動放在http請求中,如果這些數據並不是每個請求都需要發給服務端的數據,瀏覽器這設置自動處理無疑增加了網路開銷;但如果這些數據是每個請求都需要發給服務端的數據(比如身份認證信息),瀏覽器這設置自動處理就大大免去了重複添加操作。所以對於那種設置「每次請求都要攜帶的信息(最典型的就是身份認證信息)」就特別適合放在cookie中,其他類型的數據就不適合了。
不同的瀏覽器存放的cookie位置不一樣,也是不能通用的。
cookie的存儲是以域名形式進行區分的,不同的域下存儲的cookie是獨立的。
我們可以設置cookie生效的域(當前設置cookie所在域的子域),也就是說,我們能夠操作的cookie是當前域以及當前域下的所有子域
一個域名下存放的cookie的個數是有限制的,不同的瀏覽器存放的個數不一樣,一般為20個。
每個cookie存放的內容大小也是有限制的,不同的瀏覽器存放大小不一樣,一般為4KB。
cookie也可以設置過期的時間,默認是會話結束的時候,當時間到期自動銷毀
cookie值既可以設置,也可以讀取。
我們通過document.cookie來獲取當前網站下的cookie的時候,得到的字元串形式的值,它包含了當前網站下所有的cookie(為避免跨域腳本(xss)攻擊,這個方法只能獲取非 HttpOnly 類型的cookie)。它會把所有的cookie通過一個分號+空格的形式串聯起來,例如username=chenfangxu; job=coding
要想修改一個cookie,只需要重新賦值就行,舊的值會被新的值覆蓋。但要注意一點,在設置新cookie時,path/domain這幾個選項一定要舊cookie 保持一樣。否則不會修改舊值,而是添加了一個新的 cookie。
把要刪除的cookie的過期時間設置成已過去的時間,path/domain/這幾個選項一定要舊cookie 保持一樣。
如果我們想長時間存放一個cookie。需要在設置這個cookie的時候同時給他設置一個過期的時間。如果不設置,cookie默認是臨時存儲的,當瀏覽器關閉進程的時候自動銷毀
使用方法: setCookie(‘username’,’cfangxu’,30)
domain指定了 cookie 將要被發送至哪個或哪些域中。默認情況下,domain 會被設置為創建該 cookie 的頁面所在的域名,所以當給相同域名發送請求時該 cookie 會被發送至伺服器。
瀏覽器會把 domain 的值與請求的域名做一個尾部比較(即從字元串的尾部開始比較),並將匹配的 cookie 發送至伺服器。
cookie 一般都是由於用戶訪問頁面而被創建的,可是並不是只有在創建 cookie 的頁面才可以訪問這個 cookie。 因為安全方面的考慮,默認情況下,只有與創建 cookie 的頁面在同一個目錄或子目錄下的網頁才可以訪問。即path屬性可以為伺服器特定文檔指定cookie,這個屬性設置的url且帶有這個前綴的url路徑都是有效的。
domain是域名,path是路徑,兩者加起來就構成了 URL,domain和path一起來限制 cookie 能被哪些 URL 訪問。 所以domain和path兩個個選項共同決定了cookie何時被瀏覽器自動添加到請求頭部中發送出去。如果沒有設置這兩個選項,則會使用默認值。domain的默認值為設置該cookie的網頁所在的域名,path默認值為設置該cookie的網頁所在的目錄。
通常 cookie 信息都是使用HTTP連接傳遞數據,這種傳遞方式很容易被查看,所以 cookie 存儲的信息容易被竊取。假如 cookie 中所傳遞的內容比較重要,那麼就要求使用加密的數據傳輸。
secure選項用來設置cookie只在確保安全的請求中才會發送。當請求是HTTPS或者其他安全協議時,包含 secure 選項的 cookie 才能被發送至伺服器。
把cookie設置為secure,只保證 cookie 與伺服器之間的數據傳輸過程加密,而保存在本地的 cookie文件並不加密。就算設置了secure 屬性也並不代表他人不能看到你機器本地保存的 cookie 信息。機密且敏感的信息絕不應該在 cookie 中存儲或傳輸,因為 cookie 的整個機制原本都是不安全的
注意:如果想在客戶端即網頁中通過 js 去設置secure類型的 cookie,必須保證網頁是https協議的。在http協議的網頁中是無法設置secure類型cookie的。
這個選項用來設置cookie是否能通過 js 去訪問。默認情況下,cookie不會帶httpOnly選項(即為空),所以默認情況下,客戶端是可以通過js代碼去訪問(包括讀取、修改、刪除等)這個cookie的。
當cookie帶httpOnly選項時,客戶端則無法通過js代碼去訪問(包括讀取、修改、刪除等)這個cookie。 在客戶端是不能通過js代碼去設置一個httpOnly類型的cookie的,這種類型的cookie只能通過服務端來設置。
HTML5新方法,不過IE8及以上瀏覽器都兼容。
生命周期:持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。
存儲的信息在同一域中是共享的。
當本頁操作(新增、修改、刪除)了localStorage的時候,本頁面不會觸發storage事件,但是別的頁面會觸發storage事件。
大小:據說是5M(跟瀏覽器廠商有關係)
localStorage本質上是對字元串的讀取,如果存儲內容多的話會消耗內存空間,會導致頁面變卡
localStorage受同源策略的限制
當storage發生改變的時候觸發。 當頁面對storage的操作會觸發其他頁面的storage事件,storage事件是可以跨頁面通訊的,在你對storage對象進行任何操作的時候,都會觸發storage事件,事件裡邊包括包括:
storage事件使用參考
對於sessionStorage和localStorage上的任何更改都會觸發storage事件,但storage事件不會區分這兩者;
其實跟localStorage差不多,也是本地存儲,會話本地存儲
和 localStorage 的API完全相同
用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。也就是說只要這個瀏覽器窗口沒有關閉,即使刷新頁面或進入同源另一頁面,數據仍然存在。關閉標籤頁後,sessionStorage即被銷毀,或者在新的標籤頁打開同源的另一個頁面,sessionStorage也是沒有的。
應用的場景有,比如說我們都知道,在頁面刷新的時候,我們寫的js裡邊的變數函數等等的,內存會被釋放掉,那麼這個時候可以用sessionStorage來存儲一些不想被釋放掉內存的數據,比如說記錄一個滾動條的位置,或者播放器的進度等等
在本地(瀏覽器端)存儲數據
sessionStorage和localStorage 都受到同源策略限制,就是跨域問題,在訪問sessionStorage和localStorage 的時候,頁面必須在同一個域名,使用同一個協議,並且一個埠
sessionStorage比localStorage更嚴苛一點,除了協議、主機名、埠外,還要求在同一窗口(也就是瀏覽器的標籤頁)下。
localStorage是永久存儲,除非手動刪除。
sessionStorage當會話結束(當前頁面、標籤頁關閉的時候,自動銷毀)
cookie的數據會在每一次發送http請求的時候,同時發送給伺服器而localStorage、sessionStorage不會。
sessionStorage和localStorage 也有大小限制,相比cookie大了很多,是5M
sessionStorage和localStorage只能通過客戶端操作,cookie既可以通過客戶端操作又可以通過服務端操作
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/189276.html