77.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);
---------------------
做者：周自包
來源：CSDN
原文：https://blog.csdn.net/darrenzzb66/article/details/73012577
版權聲明：本文爲博主原創文章，轉載請附上博文連接！