01 front-end interview: Describe the difference cookices sessionStorage and localStorage

The same point: can be stored in the client

difference:

1, the storage size

• cookie data size can not exceed 4K.
• Although sessionStorage and localStorage also limited in size, but is much larger than the cookie, you can reach 5M or greater.

2, the effective time t

• localStorage to store persistent data, the browser is closed after the data will not be lost unless the initiative to delete data;
• sessionStorage data is automatically deleted after the current browser window is closed.
• Valid until the expiration date cookie cookie settings, even if the window or browser is closed.

Interaction between the 3, and data server

• cookie every time data is automatically transmitted to the server carries in the HTTP header, the server can also write cookie to the client.
• sessionStorage and localStorage not automatically send data to the server, saved only locally.

 

 

cookie operations

Set cookie

cookie format

cookie content: key = value; key = value ...... storage, custom parameter name

cookie expiration time: cookie.expires = 1000 ms

cookie path: path (incompatible)

var name = 'jem'; 
　　　　var pwd = '123';
　　　　var now = new Date(); 
　　　　now.setTime(now.getTime() + 1*24*60*60*1000)); 
　　　　var path = '/'; //不建议使用 
　　　　document.cookie = 'name=' + name + ';expires=' + now.toUTCString() + ';path=' + path; document.cookie = 'pwd=' + name + ';expires=' + now.toUTCString() + ';path=' + path;

　　Read cookie

method 1

　　

function getKey(key) { 
    var data = document.cookie; 
    var findStr = key + '='; 
    var index = data.indexOf(findStr); 
    if(index == -1) retuen null; 
    var subStr = data.subString(index + findStr.length); 
    var lastIndex = subStr.indexof（';'）; 
    if(lastIndex == -1){
         return subStr; 
    }else{
         return subStr.substring(0,lastIndex)
     } 
}    

Method 2,

function getKey(key) { 
    return JSON.parse( "{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim,"\":\"")+"\"}" )[key]; }

　　

Clear cookie

var name = null; var pwd = null; var now = new Date (); var path = "/"; // may be specific to the page document.cookie = "name =" + name + "; expires =" + now .toUTCString () + "; path =" + path; // name document.cookie = "pwd =" + pwd + "; expires =" + now.toUTCString () + "; path =" + path; // password  

Packaging method

var cookie = {set: function (key, value, time) {// set the cookie for if (key) return 'can not be empty'; // set the return key does not exist var date = new Date (); var expiresDays = time && 1; // default expiry date.setTime (date.getTime () + expiresDays * 24 * 60 * 60 * 1000) 1 day; // time formatted cookies document.cookie = key + '=' + value + '; = expires =' + date.toUTCString ();}, get: function (key) {return JSON.parse ( "{\" "+ document.cookie.replace (/; \ s + / gmi," \ " , \ "") replace (/ = / gim,. "\": \ "") + "\"} ") [key];}, check: function (key) {var cookieVal = this.get (); if (cookieVal == null || cookieVal == undefinded) {alert ( 'value already exists!')} else {alert ( 'may set the value')}}, delete: function (key) {var date = new Date ( ); date.setTime (date.getTime () - 10000); // set a time in the past document.cookie = key + '=' + value + ';=expires=' + date.toUTCString(); } }

 

sessionStorage use

seddionStorage.setItem (key, value); // must be a string 
var value = sessionStorage.getItem (key); // or sessionStorage value 
sessionStorage.removeItem (key); // delete the value of sessionStorage 
seddionStorage.clear (); / / Clear sessionStorage

　　The use localStorage

同sessionStorage

localStorage and sessionStorage and length of the key attributes Traversing

and provided sessionStorage key localStorage () and the length can easily achieve data storage traversal, for example the following code:

var storage = window.localStorage; for(var i=0, len=storage.length; i<len;i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); }

--------------------------------------------------------------------------------------------------------------------------