歡迎您光臨本站 註冊首頁

JavaScript cookie原理及使用實例

←手機掃碼閱讀     ml5rwbikls @ 2020-05-09 , reply:0

什麼是cookie?
cookie 是本地計算機的臨時存儲。
作用:在瀏覽器中進行數據的存儲,用戶名、密碼(比如:保存頁面信息,自動登錄等)。
特點:
cookie需要在服務器環境下運行;
cookie的容量在4kb左右,限制為每個域名50個cookie個數(IE),不同瀏覽器容量和個數不同;
cookie以字符串類型存儲,不同域名存儲的數據是無法共享;
cookie默認是臨時存儲的,當瀏覽器關閉時,自動銷燬;
cookie可以被禁用也可以刪除,且安全性不高。
可以對cookie值進行加密(MD5);
讀取和設置cookie
document.cookie = "user=123456";
console.log(document.cookie); //user=123456
使用f12查看當前頁面存儲的cookie
注意:
在打開網址時或者提交表單時自動裹挾著cookie數據發送到服務器,並且服務端程序可以 繼續裹挾著新的cookie內容存儲在你的電腦的cookie中。
設置cookie的生存期
格式:document.cookie = “名稱=值;expires=” + 時間;(時間必須是一個字符串)。
var date=new Date(); date.setHours(date.getHours()+1);//設置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();
上面代碼表示:設置cookie在當前時間的一個小時後過期,第一次運行先存入a為3的值,然後把cookie的值從字符串轉為數值型,再進行累加,每次設置生存期都要把data對象轉為字符串類型(toUTCString)。
在生存期內的cookie,關閉頁面不會銷燬,生存期結束,關閉頁面銷燬cookie;
cookie存儲多個數據
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]);//數字(年齡)需要轉為數值型 return value; },{}); }
關於cookie安全
XSS攻擊:XSS攻擊通常指的是通過利用網頁開發時留下的漏洞,通過巧妙的方法注入惡意指令代碼到網頁,使用戶加載並執行攻擊者惡意製造的網頁程序(百度百科)。
XSS攻擊需要具備的條件:
1. 必須是同一個域當中頁面的表單提交,必須有文本內容提交
2. 提交的內容需要被放置在頁面中,例如評論等內容
3. 在提交的文本中出現script標籤,並且這個標籤沒有被替代,直接放入在頁面中
4. 這個頁面可以被所有用戶查看到
5. 這個script標籤具備一定的盜竊cookie特徵
解決辦法
提交頁面時將script標籤過濾再提交;
但可以通過插入圖片的超鏈接,點擊是執行JavaScript腳本; 遇到這種時就需要將JavaScript腳本替換
關於cookie安全還要其他攻擊方式這裡只簡單介紹一下cookie,深入瞭解請上網查詢資料。


[ml5rwbikls ] JavaScript cookie原理及使用實例已經有252次圍觀

http://coctec.com/docs/javascript/show-post-233429.html