JavaScript cookie原理及使用實例
什么是cookie?
cookie 是本地計算機的臨時存儲。
作用:在瀏覽器中進行數(shù)據(jù)的存儲,用戶名、密碼(比如:保存頁面信息,自動登錄等)。
特點:
- cookie需要在服務(wù)器環(huán)境下運行;
- cookie的容量在4kb左右,限制為每個域名50個cookie個數(shù)(IE),不同瀏覽器容量和個數(shù)不同;
- cookie以字符串類型存儲,不同域名存儲的數(shù)據(jù)是無法共享;
- cookie默認是臨時存儲的,當瀏覽器關(guān)閉時,自動銷毀;
- cookie可以被禁用也可以刪除,且安全性不高。
- 可以對cookie值進行加密(MD5);
讀取和設(shè)置cookie
document.cookie = "user=123456";
console.log(document.cookie); //user=123456
使用f12查看當前頁面存儲的cookie

注意:
在打開網(wǎng)址時或者提交表單時自動裹挾著cookie數(shù)據(jù)發(fā)送到服務(wù)器,并且服務(wù)端程序可以 繼續(xù)裹挾著新的cookie內(nèi)容存儲在你的電腦的cookie中。
設(shè)置cookie的生存期
格式:document.cookie = “名稱=值;expires=” + 時間;(時間必須是一個字符串)。
var date=new Date();
date.setHours(date.getHours()+1);//設(shè)置1小時的生存期
// document.cookie="a=3"; //先存入a=3,只運行第一次
console.log(document.cookie);
var a=Number(document.cookie.split("=")[1]);
a++;
document.cookie="a="+a+";expires="+date.toUTCString();
上面代碼表示:設(shè)置cookie在當前時間的一個小時后過期,第一次運行先存入a為3的值,然后把cookie的值從字符串轉(zhuǎn)為數(shù)值型,再進行累加,每次設(shè)置生存期都要把data對象轉(zhuǎn)為字符串類型(toUTCString)。
在生存期內(nèi)的cookie,關(guān)閉頁面不會銷毀,生存期結(jié)束,關(guān)閉頁面銷毀cookie;
cookie存儲多個數(shù)據(jù)
var obj={
user:"xietian",
age:30,
sex:"男"
}
function setCookie(obj,date){
for(var prop in obj){
document.cookie=prop+"="+obj[prop]+(date ? ";expires="+date.toUTCString() : "");
}
}
var date=new Date();
date.setFullYear(2021);
setCookie(obj,date);
使用reduce獲取多個cookie值
var o=getCookie();
console.log(o);
function getCookie(){
return document.cookie.split("; ").reduce((value,item)=>{
var arr=item.split("=");
value[arr[0]]=isNaN(arr[1]) ? arr[1] : Number(arr[1]);//數(shù)字(年齡)需要轉(zhuǎn)為數(shù)值型
return value;
},{});
}
關(guān)于cookie安全
XSS攻擊:XSS攻擊通常指的是通過利用網(wǎng)頁開發(fā)時留下的漏洞,通過巧妙的方法注入惡意指令代碼到網(wǎng)頁,使用戶加載并執(zhí)行攻擊者惡意制造的網(wǎng)頁程序(百度百科)。
XSS攻擊需要具備的條件:
1. 必須是同一個域當中頁面的表單提交,必須有文本內(nèi)容提交
2. 提交的內(nèi)容需要被放置在頁面中,例如評論等內(nèi)容
3. 在提交的文本中出現(xiàn)script標簽,并且這個標簽沒有被替代,直接放入在頁面中
4. 這個頁面可以被所有用戶查看到
5. 這個script標簽具備一定的盜竊cookie特征
解決辦法
提交頁面時將script標簽過濾再提交;
但可以通過插入圖片的超鏈接,點擊是執(zhí)行JavaScript腳本; 遇到這種時就需要將JavaScript腳本替換
關(guān)于cookie安全還要其他攻擊方式這里只簡單介紹一下cookie,深入了解請上網(wǎng)查詢資料。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- JavaScript本地儲存:localStorage、sessionStorage、cookie的使用
- js實現(xiàn)操作cookie的常見方法總結(jié)【創(chuàng)建、讀取、刪除】
- springboot封裝JsonUtil,CookieUtil工具類代碼實例
- JavaScript創(chuàng)建、讀取和刪除cookie
- JavaScript學習教程之cookie與webstorage
- 利用js-cookie實現(xiàn)前端設(shè)置緩存數(shù)據(jù)定時失效
- js使用cookie實現(xiàn)記住用戶名功能示例
- JS使用cookie保存用戶登錄信息操作示例
- Javascript讀寫cookie的實例源碼
- 詳解操作cookie的原生方法cookieStore
相關(guān)文章
JavaScript實現(xiàn)移動端彈窗后禁止?jié)L動
這篇文章主要介紹了JavaScript實現(xiàn)移動端彈窗后禁止?jié)L動,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
一個關(guān)于javascript匿名函數(shù)的問題分析
一個關(guān)于javascript匿名函數(shù)的問題分析,學習js的朋友可以參考下2012-03-03

