js設置cookiepath的簡單介紹

本文目錄一覽：

• 1、如何用js來操作cookie呢？
• 2、前端本地存儲的 3 種方法 cookie、localStorage、sessionStorage
• 3、js 怎麼重新設置cookie
• 4、JavaScript 的path 怎麼設置cookie的路徑

如何用js來操作cookie呢？

js操作COOKIE，直接給document加上cookie就可以了，但是一般如果單個的加會很麻煩所以一般會直接寫好一個函數，可以直接操作cookie，這樣就很方便了

setCookie這個是寫入cookie，第一個是名稱，第二個是cookie值，第三個是過期時間

getCookie這個是查找cookie;

removeCookie這是你需要刪除的cookie;

function setCookie(name, value, iDay) 

{

var oDate=new Date();

oDate.setDate(oDate.getDate()+iDay);

document.cookie=name+’=’+encodeURIComponent(value)+’;expires=’+oDate;

}

function getCookie(name)

{

var arr=document.cookie.split(‘; ‘);

var i=0;

for(i=0;iarr.length;i++)

{

//arr2-[‘username’, ‘abc’]

var arr2=arr[i].split(‘=’);

if(arr2[0]==name)

{

var getC = decodeURIComponent(arr2[1]);

return getC;

}

}

return ”;

}

function removeCookie(name)

{

setCookie(name, ‘1’, -1);

}

前端本地存儲的 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既可以通過客戶端操作又可以通過服務端操作

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());

JavaScript 的path 怎麼設置cookie的路徑

//調用

//設置cookie

function setCookie(name, value, seconds) {

seconds = seconds || 0; //seconds有值就直接賦值，沒有為0，這個根php不一樣。

var expires = “”;

if (seconds != 0 ) { //設置cookie生存時間

var date = new Date();

date.setTime(date.getTime()+(seconds*1000));

expires = “; expires=”+date.toGMTString();

}

document.cookie = name+”=”+escape(value)+expires+”; path=/”; //轉碼並賦值

}

回來再看