1. 程式人生 > >cookie localStorage與sessionStorage的使用及區別

cookie localStorage與sessionStorage的使用及區別

func 創建 兼容 mat console tor sessions regex item

cookie是儲存在用戶本地終端上的數據,意思就是能把用戶的一些文字信息儲存下來,但是cookie的儲存空間特別小,一個瀏覽器能創建的 Cookie 數量最多為 300 個,並且每個不能超過 4KB,每個 Web 站點能設置的 Cookie 總數不能超過 20 個,因此現在越來越少的人使用cookie了,下面講解一下cookie的用法吧,在使用cookie的時候我們需要先設置cookie

function setCookie(name, value) {

var Days = 30;//cookie的存儲時間為30天

var exp = new Date();

exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);

document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();

}

setCookie("性別", "男"); //存儲name為性別,value為男的cookie

接下來我們如果使用需要獲取cookie:

function getCookie(name) {

var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

if(arr = document.cookie.match(reg))

return unescape(arr[2]);

else

return null;

}

var a=getCookie("性別");//獲取名為性別的cookie

console.log(a);

接下來我們刪除cookie

function delCookie(name) {

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval = getCookie(name);//此句代碼告訴我們在刪除cookie之前我們需要先獲取cookie

if(cval != null)

document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

}

delCookie("性別");//刪除名為性別的cookie

接下來我們來說一下localStorage與sessionStorage的區別

兩者都有大約5M的存儲空間,並且使用頻率比較高,兩者的最主要的區別就是存儲期限,localStorage存儲的數據為持久數據,而sessionStorage當你關閉瀏覽器的時候數據就沒了

if(window.localStorage){ //兼容

//alert("瀏覽器支持");

var local=window.localStorage;

local.setItem(‘name‘,‘wu‘);

local.name2=‘Mr.Wu‘;

local.setItem(‘name2‘,‘Mr.Wu‘);//修改(再存儲一遍);

localStorage.removeItem("name");//清除

localStorage.clear();//全部清除

}

if(window.sessionStorage){

//alert("瀏覽器支持");

var session=window.sessionStorage;

session.setItem(‘name‘,‘wu‘);//設置存儲

session.name2=‘Mr.Wu‘;//設置存儲

session.setItem(‘name‘,‘Mr.WuGe‘);//修改(再存儲一遍);

sessionStorage.removeItem("name");

sessionStorage.clear();

}

以上兩個代碼可以直接拿來用的 用此代碼可以實現存儲效果了

cookie localStorage與sessionStorage的使用及區別