1. 程式人生 > >JS本地儲存資料的幾種方法

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