1、cookie
HTTP cookie，通常直接叫做cookie，是客戶端用來存儲數據的一種選項，它既可以在客戶端設置也可以在伺服器端設置。cookie會跟隨任意HTTP請求一起發送。
優點：兼容性好
缺點：一是增加了網路流量；二則是它的數據容量有限，最多隻能存儲4KB的數據，瀏覽器之間各有不同；三是不安全。
2、userData
userData是微軟通過一個自定義行為引入的持久化用戶數據的概念。用戶數據允許每個文檔最多128KB數據，每個域名最多1MB數據。
缺點：userData不是 web 標準的一部分，只有IE支持。
3、web存儲機制
web storage，包括兩種：sessionStorage 和 localStorage，前者嚴格用於一個瀏覽器會話中存儲數據，因為數據在瀏覽器關閉後會立即刪除；後者則用於跨會話持久化地存儲數據。
缺點：IE不支持 SessionStorage，低版本IE ( IE6, IE7 ) 不支持 LocalStorage，並且不支持查詢語言
4、indexedDB
indexed Database API，簡稱為indexedDB，是在瀏覽器中保存結構化數據的一種「資料庫」。它類似SQL資料庫的結構化數據存儲機制，代替了廢棄已久的web SQL Database API，它能夠在客戶端存儲大量的結構化數據，並且使用索引高效檢索的API。
缺點：兼容性不好，未得到大部分瀏覽器的支持。
5、Flash cookie
Flash本地存儲，類似於HTTP cookie，它是利用 SharedObject類來實現本地存儲信息。它默認允許每個站點存儲不超過100K的數據，遠大於cookie，而且能夠跨瀏覽器。
缺點：瀏覽器需安裝 Flash 控制項，畢竟它是通過Flash的類來存儲。所幸的是，沒有安裝Flash的用戶極少。
6、Google Gears
Google Gears是Google在07年發布的一個開源瀏覽器插件，Gears 內置了一個基於SQLite的嵌入式 SQL資料庫，並提供了統一API 對 資料庫進行訪問，在取得用戶授權之後，每個站點可以在SQL資料庫中存儲「不限大小」的數據。
缺點：需要安裝 Google Gears 組件
⑵ web 前端 js cookie
我有一個思路不知道適不適用你的場景
if($("#js_ads_banner_top_slide").length&&getCookie("bannershow")=="1"){
var$slidebannertop=$("#js_ads_banner_top_slide"),$bannertop=$("#js_ads_banner_top");
setTimeout(function(){$bannertop.slideUp(1000);$slidebannertop.slideDown(1000);},2000);
setTimeout(function(){
$slidebannertop.slideUp(1000,function(){
$bannertop.slideDown(1000);
});
document.cookie="bannershow=1";//存cookie
},6000);
}
//獲取cookie
functiongetCookie(name){
vararr,reg=newRegExp("(^|)"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
returnunescape(arr[2]);
}else{
returnnull;
}
}
望採納！謝謝~
⑶ 前端cookie有哪些神秘的特點呢
cookie有如下幾個特點：
1.域的限制；
2.時間限制；
3.空間限制，cookie只能存儲4kb；
4.數量限制，每個域下最多不能超過50個cookie；
5.存儲數據類型限制，cookie只能存儲字元串；
⑷ Web前端新手應該了解的Cookie知識！
今天小編要跟大家分享的文章是關於Web前端新手應該了解的Cookie知識。正准備學習Web前端知識和准備從事Web
前端工作的小夥伴怎麼能不了解Cookie。今天小編就為大家帶來了這篇文章，讓我們一起來看一看Web前端新手應該了解的Cookie知識。
一、Cookie的出現
瀏覽器和伺服器之間的通信少不了HTTP協議，但是因為HTTP協議是無狀態的，所以伺服器並不知道上一次瀏覽器做了什麼樣的操作，這樣嚴重阻礙了互動式Web
應用程序的實現。
針對上述的問題，網景公司的程序員創造了Cookie。
二、Cookie的傳輸
伺服器端在實現Cookie標準的過程中，需要對任意HTTP請求發送Set-CookieHTTP頭作為響應的一部分：
1.Set-Cookie:name=value;expires=Tue,03-Sep-201914:10:21GMT;path=/;
domain=.#;
瀏覽器端會存儲這樣的Cookie，並且為之後的每個請求添加CookieHTTP請求頭發送回伺服器：
1.Cookie:name=value
伺服器通過驗證Cookie值，來判斷瀏覽器發送請求屬於哪一個用戶。
三、瀏覽器中的Cookie
瀏覽器中的Cookie主要由以下幾部分組成：
·名稱：Cookie唯一的名稱，必須經過URL編碼處理。(同名會出現覆蓋的情況)
·值：必須經過URL編碼處理。
·域(domain)：默認情況下cookie在當前域下有效，你也可以設置該值來確保對其子域是否有效。
·路徑(path)：指定Cookie在哪些路徑下有效，默認是當前路徑下。
·
失效時間(expires)：默認情況下，瀏覽器會話結束時會自動刪除Cookie;也可以設置一個GMT格式的日期，指定具體的刪除日期;如果設置的日期為以前的日期，那麼Cookie會立即刪除。
·安全標志(secure)：指定之後只允許Cookie發送給https協議。
瀏覽器在發送請求時，只會將名稱與值添加到請求頭的Cookie欄位中，發送給服務端。
瀏覽器提供了一個非常蹩腳的API來操作Cookie：
1.document.cookie
通過上述方法可以對該Cookie進行寫操作，每一次只能寫入一條Cookie字元串：
1.document.cookie='a=1;secure;path=/'
通過該方法還可以進行Cookie的讀操作：
1.document.cookie//"a=1"
由於上述方法操作Cookie非常的不直觀，一般都會寫一些函數來簡化Cookie讀取、設置和刪除操作。
對於Cookie的設置操作中，需要以下幾點：
對於名稱和值進行URL編碼處理，也就是採用JavaScript中的encodeURIComponent()方法;
expires要求傳入GMT格式的日期，需要處理為更易書寫的方式，比如：設置秒數的方式;注意只有的屬性名的secure;
每一段信息需要採用分號加空格。1.functionsetCookie(key,value,attributes){
2.if(typeofdocument==='undefined'){
3.return
4.}
5.attributes=Object.assign({},{
6.path:'/'
7.},attributes)
8.
9.let{domain,path,expires,secure}=attributes
10.
11.if(typeofexpires==='number'){
12.expires=newDate(Date.now()+expires*1000)
13.}
14.if(expiresinstanceofDate){
15.expires=expires.toUTCString()
16.}else{
17.expires=''
18.}
19.
20.key=encodeURIComponent(key)
21.value=encodeURIComponent(value)
22.
23.letcookieStr=`${key}=${value}`
24.
25.if(domain){
26.cookieStr+=`;domain=${domain}`
27.}
28.
29.if(path){
30.cookieStr+=`;path=${path}`
31.}
32.
33.if(expires){
34.cookieStr+=`;expires=${expires}`
35.}
36.
37.if(secure){
38.cookieStr+=`;secure`
39.}
40.
41.return(document.cookie=cookieStr)
42.}
Cookie的讀操作需要注意的是將名稱與值進行URL解碼處理，也就是調用JavaScript中的decodeURIComponent()方法：1.functiongetCookie(name){
2.if(typeofdocument==='undefined'){
3.return
4.}
5.letcookies=[]
6.letjar={}
7.document.cookie&&(cookies=document.cookie.split(''))
8.
9.for(leti=0,max=cookies.length;i
10.let[key,value]=cookies[i].split('=')
11.key=decodeURIComponent(key)
12.value=decodeURIComponent(value)
13.jar[key]=value
14.if(key===name){
15.break
16.}
17.}
18.
19.returnname?jar[name]:jar
20.}
最後一個清除的方法就更加簡單了，只要將失效日期(expires)設置為過去的日期即可：1.functionremoveCookie(key){
2.setCookie(key,'',{expires:-1})
3.}
介紹Cookie基本操作的封裝之後，還需要了解瀏覽器為了限制Cookie不會被惡意使用，規定了Cookie所佔磁碟空間的大小以及每個域名下Cookie的個數。
四、服務端的Cookie
相比較瀏覽器端，服務端執行Cookie的寫操作時，是將拼接好的Cookie字元串放入響應頭的Set-Cookie欄位中;執行Cookie的讀操作時，則是解析HTTP請求頭欄位Cookie中的鍵值對。
與瀏覽器最大的不同，在於服務端對於Cookie的安全性操碎了心
signed
當設置signed=true時，服務端會對該條Cookie字元串生成兩個Set-Cookie響應頭欄位：
1.Set-Cookie:lastTime=2019-03-05T14:31:05.543Z;path=/;httponly
2.Set-Cookie:lastTime.sig=URXREOYTtMnGm0b7qCYFJ2Db400;path=/;
httponly
這里通過再發送一條以.sig為後綴的名稱以及對值進行加密的Cookie，來驗證該條Cookie是否在傳輸的過程中被篡改。
httpOnly
服務端Set-Cookie欄位中新增httpOnly屬性，當服務端在返回的Cookie信息中含有httpOnly欄位時，開發者是不能通過JavaScript來操縱該條Cookie字元串的。
這樣做的好處主要在於面對XSS(Cross-sitescripting)攻擊時，黑客無法拿到設置httpOnly欄位的Cookie信息。
此時，你會發現localStorage相比較Cookie，在XSS攻擊的防禦上就略遜一籌了。sameSite
在介紹這個新屬性之前，首先你需要明白：當用戶從#發起#的請求也會攜帶上Cookie，而從#攜帶過來的Cookie稱為第三方Cookie。
雖然第三方Cookie有一些好處，但是給CSRF(Cross-siterequestforgrey)攻擊的機會。
為了從根源上解決CSRF攻擊，sameSite屬性便閃亮登場了，它的取值有以下幾種：
·
strict：瀏覽器在任何跨域請求中都不會攜帶Cookie，這樣可以有效的防禦CSRF攻擊，但是對於有多個子域名的網站採用主域名存儲用戶登錄信息的場景，每個子域名都需要用戶重新登錄，造成用戶體驗非常的差。
·lax：相比較strict，它允許從三方網站跳轉過來的時候使用Cookie。
為了方便大家理解sameSite的實際效果，可以看這個例子：1.//#服務端會在訪問頁面時返回如下Cookie
2.cookies.set('foo','aaaaa')
3.cookies.set('bar','bbbbb')
4.cookies.set('name','cccccc')
5.
6.//#服務端會在訪問頁面時返回如下Cookie
7.cookies.set('foo','a',{sameSite:'strict'})
8.cookies.set('bar','b',{sameSite:'lax'})
9.cookies.set('baz','c')
如何現在用戶在#中點擊鏈接跳轉到#，它的請求頭是這樣的：1.RequestHeaders
2.
3.Cookie:bar=b;baz=c
五、網站性能優化
Cookie在服務端和瀏覽器的通信中，主要依靠HTTP的響應頭和請求頭傳輸的，所以Cookie會占據一定的帶寬。
前面提到瀏覽器會為每一次HTPP請求自動攜帶上Cookie信息，但是對於同站內的靜態資源，伺服器並不需要處理其攜帶的Cookie，這無形中便浪費了帶寬。
在最佳實踐中，一般都會將靜態資源部署到獨立的域名上，從而可以避免無效Cookie的影響。
以上就是小編今天為大家分享的關於Web前端新手應該了解的Cookie知識，希望本篇文章能夠對正在從事Web前端工作和准備從事Web
前端學習的小夥伴們有所幫助。想要了解更多Web前端相關知識記得關注北大青鳥Web培訓官網！
作者|descire
來源|#/article/286535
*聲明：內容與圖片均來源於網路(部分內容有修改)，版權歸原作者所有，如來源信息有誤或侵犯權益，請聯系我們刪除或授權事宜
⑸ cookie及其常用屬性值
Cookie通過在客戶端記錄信息確定用戶身份，Session通過在伺服器端記錄信息確定用戶身份。
expires是當前cookie的過期時間。max-age是當前cookie經過多少秒失效，等於0是關閉瀏覽器立即失效，小於0是cookie無效 立即刪除。max-age的優先順序比exprises高。
path：路徑，指定與cookie關聯的web，目錄或路徑，
"/" 凡是來自同一伺服器，URL里有相同路徑的所有web頁面都可以共享cookies。
domain：域，指定關聯的web伺服器或域，值是域名，如果我們想讓www.achome.cn能夠訪問bbs.achome.cn設置的cookies，該怎麼辦? 我們可以把domain屬性設置成「achome.cn」，並把path屬性設置成「/」。
secure：安全，指定cookie的值通過網路如何在用戶和伺服器之間傳遞。不設置或為空的情況就是使用不安全的HTTP鏈接傳遞數據。否則就是通過HTTPS或者其他安全協議傳遞數據。
本地的cookie文件並不加密。
samesite：（strict、lax、none）
strict最嚴格，完全禁止第三方cookie，跨站點時任何情況都不發送cookie。當前URL與請求目標一致才會帶上cookie。
lax除了導航到目標網址的get請求外大多數情況也不發送第三方cookie，允許鏈接、預載入、get 表單攜帶cookie，但post表單、iframe、ajax等不允許攜帶cookie。基本也杜絕了CSRF攻擊。
none任何時候都帶上cookie。
HTTPonly：安全性，客戶端腳本無法通過document.cookie等方式獲取讀寫。有助於避免xss攻擊。
CSRF攻擊：cookie往往用來存儲用戶的身份信息，惡意網站可以設法偽造帶有正確cookie的HTTP請求。第三方網站誘導發出的cookie，稱為第三方cookie。
設置cookie：響應頭中的set-cookie 前端設置cookie。同站same-site 二級域名+頂級域名，相等即可。www.lilnong.top 主機名.二級域名.頂級域名。同源和跨域same-origin 和cross-origin 。
⑹ 怎麼讓shiro給前端發cookie
shiro如何返回cookie給前端shiro如何返回cookie給前端。
有個springboot項目，登錄和許可權採用shiro管理，某天前端開發人員突然說小程序頁面裡面無法把cookie傳遞給後端。
⑺ 前端如何跨域拿到cookie
前後端分離，最應該用token來交互，而不是用cookie。當然是可以取得cookie的。所有的cookie 都在頭裡面，有個Set-Cookie的欄位，讀取這個頭就可以了。
Token是令牌。HTTP是無狀態的，Cookie是記錄HTTP狀態的一種手段。瀏覽器會通過Set-Cookie欄位獲取Cookie。而Token是通過oauth認證後得到的令牌。
⑻ 後端設置的cookie,前端能控制失效時間嗎
不能。
後端寫cookie對前端來說就是個黑盒子，我只要向後端發送申請，就可以拿到當前用戶的信息，盡管我不知道用戶的id。操作簡單，理解起來不太友好。所以前端不能修改。
⑼ 前端中怎樣設置cookie
你好，可以參考這個網址的教程。前端開發中的cookie使用總結。
⑽ 說一下前端數據存儲方式（cookies，localstorage，sessionstorage，indexedDB）的區別
Cookie最初是在客戶端用於存儲會話信息的，其要求伺服器對任意HTTP請求發送Set-CookieHTTP頭作為響應的一部分。cookie
以name為名稱，以value為值，名和值在傳送時都必須是URL編碼的。瀏覽器會存儲這樣的會話信息，在這之後，通過為每個請求添加Cookie
HTTP頭將信息發送回伺服器。
localstorage
存儲方式：
以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。
sessionstorage
HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區別在於 sessionStorage 在關閉頁面後即被清空，而 localStorage 則會一直保存。
IndexedDB
索引資料庫(IndexedDB) API（作為 HTML5 的一部分）對創建具有豐富本地存儲數據的數據密集型的離線 HTML5 Web 應用程序很有用。同時它還有助於本地緩存數據，使傳統在線 Web 應用程序（比如移動 Web 應用程序）能夠更快地運行和響應。