DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 詳解Cookie、LocalStorage、SessionStorage
詳解Cookie、LocalStorage、SessionStorage
編輯:HTML5教程     

不管是筆試還是面試相信大家都會經常遇到問Cookie、LocalStorage、SessionStorage 這三個不同的,什麼不說先上一波圖先:

 

針對他們大小之分應用場景也有不同:

因為考慮到每個 HTTP 請求都會帶著 Cookie 的信息,所以 Cookie 當然是能精簡就精簡啦,比較常用的一個應用場景就是判斷用戶是否登錄。針對登錄過的用戶,服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼,下次只要讀取這個值就可以判斷當前用戶是否登錄啦。localStorage相對cookie大的多,所以可以用來做購物車,h5小游戲,web應用等。

注意:不是什麼數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候,需要時刻注意是否有代碼存在 XSS(什麼是xxs下回分解) 注入的風險。因為只要打開控制台,你就隨意修改它們的值,也就是說如果你的網站中有 XSS 的風險,它們就能對你的 localStorage 肆意妄為。所以千萬不要用它們存儲你系統中的敏感數據。

   說了他們的好和不好後是時候表演正真技術了(js如何操作他們):

JS設置cookie:

假設在A頁面中要保存變量username的值("chentutu")到cookie中,key值為name,則相應的JS代碼為:

document.cookie="name="+username;  

JS讀取cookie:

var username=document.cookie.split(";")[0].split("=")[1];  

這是最簡單的操作cookie的方法,下面代碼給大家展示一下cookie的基本操作:

//寫cookies 

function setCookie(name,value,Days) 
{  
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 

//讀取cookies 
function getCookie(name) 
{ 
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
 
    if(arr=document.cookie.match(reg))
 
        return unescape(arr[2]); 
    else 
        return null; 
} 
//讀取cookie方法二:
 function getCookie2(key) {
        var arr1 = document.cookie.split('; ');
        for (var i = 0; i < arr1.length; i++) {
            var arr2 = arr1[i].split('=');
            if (arr2[0] == key) {
                return unescape(arr2[1]);
            }
        }
    }
//刪除cookies 
function delCookie(name) 
{ 
    var exp = new Date(); 
    exp.setTime(exp.getTime() - 1); 
    var cval=getCookie(name); 
    if(cval!=null) 
        document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 
} 

localstorage提供了:localStorage.getItem(name);localStorage.setItem(name, value);localStorage.removeItem(name);等方法,用來處理增、刪、查。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved