Difference cookie, localStorage, sessionStorage of

First, the concept

1. Cookie
   • What is Cookie - Cookie is some of the data stored in a text file on your computer in.
2. localStorage
   • What is localStorage - localStorage data refers to the information stored on the local client hardware, even if the browser is closed, information data also exists
3. sessionStorage
   • What is sessionStorage - sessionStorage refers to the object in the session, so when the browser is closed, sessionStorage information also will clear the data stored

 

Second, how to use (API and common usage)

1. Cookie (refer rookie tutorial https://www.runoob.com/js/js-cookies.html
   • Create a Cookie

     = the document.cookie ' username = Doe ' ;     // basic set 
     
     the document.cookie = ' username = Doe; Expires = Thu, 18 is On Dec 2043 12:00:00 GMT ' ;      // basic setting expiration time + (default cookie deleted when the browser is closed)

   • Read Cookie

     var X = the document.cookie;         // read the cookie

   • Modify Cookie

     // to the key re-assignment can be, for example, the original username = Doe, modified to John 
     the document.cookie = ' username = John ' ;

   • Cookie worth acquiring function

     function getCookie(cname){
         var name = cname + '=';
         var ca = document.cookie.split(';');
         for(var i = 0; i < ca.length; i++){
             var c = ca[i].trim();    // trim()用于除去前后空格
             if(c.indexOf(name) == 0) return c.substring(name.length, c.length);
          }
          return '';
     }

   • Cookie detect the presence or absence

     // if there is we want to have the data, the function can be used getCookie (↑ above that detected in the cookie 
     
     function checkCookie () { 
         var username = getCookie ( ' username ' );
          IF (username == '' ) { 
             Alert ( ' available for purchase ' ); 
         } 
         the else { 
             username = prompt ( ' Please Enter your name: ' , '' );
              IF ! (username = '' ! && username = null ) { 
                 the setCookie ( ' username ' , username,365);
             }
         }
     }
     
     // 设置cookie
     function setCookie(key, value, time){
         var d = new Date();
         d.setTime(d.getTime() + (time * 24 * 60 * 60 * 1000));
         var expires = 'expires=' + d.toGMTString();
          document.cookie = key + '=' + value + ";" + expires;
     }

2. localStorage
   • New localStorage

     localStorage.setItem(key, value);

   • Query in the value localStorage

     localStorage.getItem(key);

   • Clear one localStorage

     localStorage.removeItem(key);

   • Clear all have localStorage

     localStorage.clear();

   • Have to get all the key and values ​​in localStorage

     function getAll() {
         var valueArr = [];
     　　 var keyArr = [];
         for(var i = 0; i < localStorage.length; i++){
             var key = localStorage.getKey(i);
             keyArr.push(key);
             valueArr.push(localStorage.getItem(key);
         }
         return newArr;
     }

3. sessionStorage
   • API consistent with localStorage

 

Three differences, cookie, sessionStorage, localStorage of

1. size
   • cookie: about 4K, very, very small;
   • sessionStorage 和 localStorage：5M；
2. Validity
   • cookie: Use expire set the expiration time
   • sessionStorage: Empty the browser is closed, the life cycle is only in dialogue under the current
   • localStorage: not emptied manually is not cleared, the life cycle forever
3. Would the data to the server
   • cookie: cookie each time you visit will be sent to the server, even when not needed, it will waste bandwidth
   • sessionStorage and localStorage: no transfer

-------------------------------------------------- -------------------------------------------------- -----------Dividing line------------------------------------- -------------------------------------------------- ------------------------

Say a little T ^ T

How to prevent XSS attacks cookie

XSS is the attacker JS script embedded in the HTML returned to mitigate those attacks, coupled with the need to set-cookie in the HTTP header: 

httponly: This attribute can prevent XSS, because he would ban JavaScript scripts to access cookie

secure: This attribute tells the browser to send the cookie only when a request to https

 

 

Dig a hole, cookie detail how to prevent xss (2019/9/12)