Web客戶端數據存儲學習筆記——Cookie

時間 2019-12-13

標籤 web 客戶端數據存儲學習筆記 cookie 欄目 HTML 简体版

原文原文鏈接

　　今天對登陸訪問的安全以及web客戶端存儲作了一些大體的學習，決定在這方面加深理解，記錄在博客裏。第一個接觸到的是Cookie...html

WHAT?

WHY?

HOW?

在學習cookie的使用時發現其名稱以及存儲的字符串值是必須通過URL編碼的。web

然而網上的許多示例（包括 w3school中文站）都沒有作這一處理，因此三哥參考阮一峯老師的關於URL編碼博文找到了解決方案，在這裏分享：瀏覽器

cookieUtil.js:

 1 //cookieUtil.js
 2 var cookieUtil = {
 3     
 4     //讀取"name"對應cookie的值
 5     get : function(name){
 6             var cookieName = encodeURIComponent(name)+"=",                //對傳入name參數URL編碼
 7                 cookieStart = document.cookie.indexOf(cookieName),
 8                 cookieValue = null;
 9                 
10             if(cookieStart > -1){
11                 var cookieEnd = document.cookie.indexOf(";",cookieStart);
12                 if(-1 == cookieEnd){
13                     cookieEnd = document.cookie.length;            //cookie值爲空
14                 }
15                 //對cookie保存的值URL解碼
16                 cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
17             }
18 　　　　　　　return cookieValue;
19         },
20         
21     //建立或設置cookie        其中name將做爲某一域內的惟一標示、不可更改
22     set : function(name,value,expires,path,domain,secure){
23         //對名稱和值URL編碼
24         var cookieText = encodeURIComponent(name)+"="+encodeURIComponent(value);
25         
26         if(expires instanceof Date){
27             cookieText += "; expires="+expires.toGMTString();
28         }
29         if(path){
30             cookieText += "; path="+path;
31         }
32         if(domain){
33             cookieText += "; domain="+domain;
34         }
35         if(secure){
36             cookieText += "; secure";
37         }
38         
39         //將根據name是否存在決定是否添加新的cookie字符串，須要注意：a、cookie長度（limit：4095B）；b、每一個域容許的cookie個數（各瀏覽器決定）
40         document.cookie = cookieText;        
41     },
42     
43     //刪除cookie
44     unset : function(name,path,domain,secure){
45         this.set(name,"",new Date(0),path,domain,secure);
46     }
47     
48 }