sessionStorage、localStorage、cookie方法小結
阿新 • • 發佈：2018-11-07
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 資料的生命期 | 一般由伺服器生成，可設定失效時間。如果在瀏覽器端生成Cookie，預設是關閉瀏覽器後失效 | 除非被清除，否則永久儲存 | 僅在當前會話下有效，關閉頁面或瀏覽器後被清除 |
| 存放資料大小 | 4K左右 | 一般為5MB | |
| 與伺服器端通訊 | 每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來效能問題 | 僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊 | |
| 易用性 | 需要程式設計師自己封裝，源生的Cookie介面不友好 | 源生介面可以接受，亦可再次封裝來對Object和Array有更好的支援 | |
一、sessionStorage
sessionStorage.setItem("key","value");//儲存key,value sessionStorage.getItem("key","value");//獲取指定key本地儲存的值 sessionStorage.removeItem("key","value");//刪除 sessionStorage.clear();//清除所有的key/value
二、localStorage
localStorage.setItem("key","value");//儲存key,value
localStorage.getItem("key","value");//獲取指定key本地儲存的值
localStorage.removeItem("key","value");//刪除
localStorage.clear();//清除所有的key/value三、cookie
1.設定cookie
function setCookie(name, value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + exp.toGMTString(); } setCookie("name", "zero");
2.讀取cookie
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if(arr = document.cookie.match(reg))
return decodeURIComponent(arr[2]);
else
return null;
}
console.log(getCookie("name"));
//設定有效期的cookies
function setCookieTime(name, value, time) {
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec * 1);
document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + exp.toGMTString();
}
function getsec(str) {
var str1 = str.substring(1, str.length) * 1;
var str2 = str.substring(0, 1);
if(str2 == "s") {
return str1 * 1000;
} else if(str2 == "h") {
return str1 * 60 * 60 * 1000;
} else if(str2 == "d") {
return str1 * 24 * 60 * 60 * 1000;
}
}
setCookieTime("person","sshuo","s5");
setTimeout(function(){
console.log(getCookie("person"));
},8000);
3.刪除cookie
function delCookie(name) {
console.log(11)
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if(cval != null) {
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
}
delCookie("name");
console.log(getCookie("name");