JS本地儲存資料的幾種方法
1.Cookie
這個恐怕是最常見也是用得最多的技術了,也是比較古老的技術了。COOKIE優點很多,使用起來很方便
但它的缺點也很多:
比如跨域訪問問題;無法儲存太大的資料(最大僅為4KB);本地儲存的資料會發送給伺服器,浪費頻寬 等等;
程式碼如下
function SetCookie(name, value) {
var key = '';
var Days = 2;
var exp = new Date();
var domain = "";
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
if (key == null || key == "") {
document.cookie = name + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";";
}
else {
var nameValue = GetCookie(name);
if (nameValue == "") {
document.cookie = name + "=" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";";
}
else {
var keyValue = getCookie(name, key);
if (keyValue != "") {
nameValue = nameValue.replace(key + "=" + keyValue, key + "=" + encodeURI(value));
document.cookie = name + "=" + nameValue + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";";
}
else {
document.cookie = name + "=" + nameValue + "&" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;" + domain + ";";
}
}
}
}
function GetCookie(name) {
var nameValue = "";
var key = "";
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg)) {
nameValue = decodeURI(arr[2]);
}
if (key != null && key != "") {
reg = new RegExp("(^| |&)" + key + "=([^(;|&|=)]*)(&|$)");
if (arr = nameValue.match(reg)) {
return decodeURI(arr[2]);
}
else return "";
}
else {
return nameValue;
}
}
2.使用sessionStorage、localStorage
localStorage:
是一種你不主動清除它,它會一直將儲存資料儲存在客戶端的儲存方式,即使你關閉了客戶端(瀏覽器),屬於本地持久層儲存
sessionStorage:
用於本地儲存一個會話(session)中的資料,一旦會話關閉,那麼資料會消失,比如重新整理。
有時候,我們需要將資料儲存到sessionStorage和localStorage中,這樣做的好處有:
1 快取資料
2 減少對記憶體的佔用
但是,storage只能儲存字串的資料,對於JS中常用的陣列或物件卻不能直接儲存。
它能儲存更大的資料(IE8上是10MB,Chrome是5MB),同時儲存的資料不會再發送給伺服器,避免頻寬浪費。
localStorage儲存方法(sessionStorage類似)
localStorage.name =’vanida;
localStorage[“name”]=’vanida’;
localStorage.setItem(“name”,”vanida”);
//這三種設定值方式是一樣的;
localStorage獲取值方法
var name = localStorage[“name”]
var name= localStorage.name
var name= localStorage.getItem(“name”);
//這三種獲取值方式是一樣的;
localStorage清除特定值方法
//清除name的值
localStorage.removeItem(“name”);
localStorage.name=”;
localStorage清除所有值方法
localStorage.clear()
localStorage只能儲存字串,如果需要儲存物件,首先要轉化為字串。利用JSON.stringify();
var person = {name:”vanida”,”sex”:”girl”,”age”:25};
localStorage.setItem(“person”,JSON.stringify(person));
// localStorage.person=”{“name”:”vanida”,”sex”:”girl”,”age”:25}”
注意:JSON.stringify()中不要忘了“i”,stringify而不是stringfy!
然後取出person的物件你可以用JSON.parse();
person = JSON.parse(localStorage.getItem(“person”));
下面是單個簡單的物件(陣列類似)存貯,不考慮其他的多個的情況
var obj = { name:'Jim' };
var str = JSON.stringify(obj);
//存入
sessionStorage.obj = str;
//讀取
str = sessionStorage.obj;
//重新轉換為物件
obj = JSON.parse(str);