關於前端信息存儲的學習筆記
cookie
Cookie 用於存儲網頁中的一些數據。
創建cookie
document.cookie="username=John Doe";
// 添加cookie過期時間（以 UTC 或 GMT 時間）
// 用戶行爲研究這個時間是可以是一週）
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
// 也可以設置cookie的路徑 默認是當前頁面
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
讀取cookie
var x = document.cookie;
document.cookie 將以字符串的方式返回所有的 cookie，類型格式： cookie1=value; cookie2=value; cookie3=value;
修改cookie
在 JavaScript 中，修改 cookie 類似於創建 cookie
刪除cookie
只需要設置 expires 參數爲以前的時間即可
localStorage
localStorage 用於長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。
存儲
localStorage.setItem("lastname", "Smith");
查詢
localStorage.getItem("lastname");
刪除
localStorage.removeItem("lastname");
清除
localStorage.clear();
localStorage 的優勢
1、localStorage 拓展了 cookie 的 4K 限制。
2、localStorage 會可以將第一次請求的數據直接存儲到本地，這個相當於一個 5M 大小的針對於前端頁面的數據庫，相比於 cookie 可以節約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的。
localStorage 的侷限
1、瀏覽器的大小不統一，並且在 IE8 以上的 IE 版本才支持 localStorage 這個屬性。
2、目前所有的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換。
3、localStorage在瀏覽器的隱私模式下面是不可讀取的。
4、localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡。
sessionStorage
sessionStorage用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口之後將會刪除這些數據。
localStorage 與 sessionStorage 的唯一一點區別就是 localStorage 屬於永久性存儲，而 sessionStorage 屬於當會話結束的時候，sessionStorage 中的鍵值對會被清空。
存儲
sessionStorage.setItem("lastname", "Smith");
查詢
sessionStorage.getItem("lastname");
刪除
sessionStorage.removeItem("lastname");
清除
sessionStorage.clear();
如果你想在瀏覽器窗口關閉後還保留數據，可以使用 localStorage 屬性， 該數據對象沒有過期時間，今天、下週、明年都能用，除非你手動去刪除
需要注意的問題
如果使用cookie 注意cookie不能存儲太大的東西，且cookie變量的個數是有限的，也就是如果你大量定義cookie 會導致有些cookie丟失
localStorage的問題是 如客戶端沒有主動清除localStorage ,另一個客戶登錄 會勿拿到之前用戶的數據，適合存儲跟系統相關的數據。
sessionStorage 在用戶離開瀏覽器之後，內容會自動清空，適合存儲跟用戶本人相關的信息。
sessionStorage 不同於session ，sessionStroge是 用戶哪怕打開同一個瀏覽器的一個新頁面 也不能共享數據。
需要說明的是這三種方式都是明文存儲 ，都不安全 ，可根據實際情況加密 ，不用把機密數據存儲在這三個中的任何一個。