本地存儲 VS 服務器存儲

本地存儲

把信息存儲在客戶端本地, 谷歌控制檯Application中均可以查看到

• cookie
• H5中WebStorage：localStorage / sessionStorage
• 本地數據庫存儲：IndexDB
• 本地緩存存儲：manifest...

服務器存儲

把數據存儲在服務器端

• 數據庫存儲：SQLSERVER / MYSQL / ORACLE / mongodb ...
• REDIS
• SESSION...

何時會用到本地存儲？本地存儲的做用？

• 1.記住用戶名和密碼（或者自動登陸）
• 2.未登陸狀態下，加入購物車的信息通常也先存儲在本地，當登陸後，把信息存儲到服務器上（目的是多平臺數據共享）
• 3.對於非實時刷新數據，咱們能夠在從服務器把數據獲取到後，臨時存儲在本地（設置有效時間），在有效時間內頁面刷新，再也不從新從服務器獲取數據，而是讀取本地數據；超過有效時間從新從服務器拉取... "前端性能優化的一點"
• 4.還能實現同一個網站不一樣頁面之間的信息共享和通訊...

本地存儲到底存儲在哪了？

1. 本地存儲是受瀏覽器限制的，例如：在谷歌中存儲的數據，在IE中獲取不到
2. 受源(域)的限制，例如：都是用谷歌瀏覽器，我在京東下存儲的數據，在百度中是獲取不到的

本地存儲的信息在控制檯中能夠查看到（並且是明文存儲），因此敏感的數據儘量不要存儲在本地，非要存儲也要作安全處理（例如：加密）

1.localStorage

• 向本地存儲的信息都是STRING字符串格式
• localStorage是持久化存儲在客戶端本地的（除非手動清除或者瀏覽器卸載等，不然一直存儲下來，沒有過時時間）

• setItem([key],[value]) 存儲信息
• getItem([key]) 獲取信息
• removeItem([key]) 移除某一項信息
• clear() 清除全部存儲的信息

localStorage.setItem('name','藍藍');  
複製代碼

2. sessionStorage

• sessionStorage會話存儲（當前頁面刷新，存儲信息還在，可是隻要頁面一關閉，全部會話存儲的信息都會消失）

3. cookie

1>設置cookie

語法：document.cookie="[key]=[value];..."

document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
複製代碼

• 能夠添加有效日期（UTC 時間）。默認狀況下，在瀏覽器關閉時會刪除 cookie：

• 經過 path 參數，您能夠告訴瀏覽器 cookie 屬於什麼路徑。默認狀況下，cookie 屬於當前頁。

2> 經過 JavaScript 讀取 cookie

var x = document.cookie;
複製代碼

document.cookie 會在一條字符串中返回全部 cookie，好比：cookie1=value; cookie2=value; cookie3=value;

3>刪除 cookie

直接把 expires 參數設置爲過去的日期便可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

// 設置cookie =>jquery.cookie.js
// 引入
<script src="client/js/jquery.min.js"></script>
<script src="client/js/jquery.cookie.js"></script>

$.cookie('username', '藍藍');
console.log($.cookie('username'));
$.removeCookie('username');
$.cookie('username', 'zhufeng', {
	expires: new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000)
});
複製代碼

應該定義 cookie 路徑以確保刪除正確的 cookie。

若是你不指定路徑，一些瀏覽器不會讓你刪除 cookie。

COOKIE VS LOCALSTORAGE的區別

• 1.大小限制：通常瀏覽器容許一個源下COOKIE最多存儲8KB，而LOCALSTORAGE被容許存儲最大的長度限制是5MB
• 2.兼容性：COOKIE兼容全部瀏覽器，而LOCALSTORAGE是H5中新增的，不兼容IE低版本瀏覽器（IE6~8）
• 3.穩定性：COOKIE有過時時間，可是通常不等到時間可能就沒了（例如：清除瀏覽器的緩存或者歷史信息、安全衛士在清理電腦垃圾等操做時，都有可能會把存儲的COOKIE給清除掉），可是這些操做對LOCALSTORAGE沒有影響
• 4.有時候瀏覽器會開啓無痕瀏覽或者隱私模式，此時沒法設置COOKIE，可是能夠設置LOCALSTORAGE的信息
• 5.和服務器端的貓膩：COOKIE老是會和服務器中的SESSION眉來眼去（客戶端和服務器端交互的時候，COOKIE信息會傳來傳去），而LOCALSTORAGE不屑於和他們同流合污（LOCALSTORAGE和服務器沒有必然的聯繫，是單純的本地存儲）
• 6.存儲時間：COOKIE有過時時間，而LOCALSTORAGE是持久存儲