前端面試01：描述一下cookices sessionStorage 和 localStorage 的區別

相同點：均可以存儲在客戶端

不一樣點：

一、存儲大小

• cookie數據大小不能超過4K。
• sessionStorage 和 localStorage 雖然也有大小限制，可是比cookie大得多，能夠達到5M或更大。

二、有效t時間

• localStorage 存儲持久數據，瀏覽器關閉後數據不會丟失除非主動刪除數據；
• sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
• cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。

三、數據和服務器之間的交互方式

• cookie的數據每次都會攜帶在HTTP頭中會自動傳遞到服務器，服務器端也能夠寫cookie到客戶端。
• sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地保存。

 

 

cookie的操做

設置cookie

cookie格式

cookie的內容：key=value;key=value……存儲，參數名自定義

cookie的過時時間：cookie.expires = 1000 毫秒

cookie的路徑：path（不兼容）

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;

　　讀取cookie

方法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)
     } 
}

方法二、

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

　　

清除cookie

var name = null;   var pwd = null;   var now = new Date();   var path = "/";//能夠是具體的網頁   document.cookie= "name=" + name + ";expires=" + now.toUTCString()+ ";path=" + path;//姓名   document.cookie = "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密碼  

封裝方法

var cookie = { set:function(key, value,time) {//設置cookie方法 if(key) return '不能爲空'; //設置key不存在的時 返回 var date = new Date(); var expiresDays = time && 1;//默認1天后過時 date.setTime(date.getTime() + expiresDays * 24 * 60 * 60 *1000 );//格式化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('值已存在！') }else{ alert('能夠設置值') } }, delete:function(key) { var date = new Date(); date.setTime(date.getTime()-10000);//設置一個過去的時間 document.cookie = key + '=' + value + ';=expires=' + date.toUTCString(); } }

 

sessionStorage 的使用

seddionStorage.setItem(key,value);//必須是字符串 
var value = sessionStorage.getItem(key);//或者sessionStorage 值 
sessionStorage.removeItem(key);//刪除sessionStorage 的值 
seddionStorage.clear();//清空sessionStorage

　　localStorage 的使用

同sessionStorage

localStorage和sessionStorage的key和length屬性實現遍歷

sessionStorage和localStorage提供的key()和length能夠方便的實現存儲的數據遍歷，例以下面的代碼：

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); }

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