本地存儲
HTTP協議
http：超文本傳輸協議
https：超文本傳輸安全協議
http協議的一個特點是無狀態，同一個客戶端的這次請求和上次請求沒有對應關系。
對http服務器來說，它並不知道這兩個請求來自同一個客戶端。
為了解決這個問題， Web程序引入了cookie機制來維護狀態。
cookie是什么
cookie是瀏覽器提供的一種機制，可以由JavaScript對其進行操作(設置、讀取、刪除)
cookie是一種會話跟蹤技術，是存儲於訪問者計算機中的一小塊數據
會話：用戶進入網站，開始瀏覽信息到關閉瀏覽器的過程，就稱之為是一次會話
會話跟蹤技術：瀏覽器和服務器之間在進行多次請求間共享數據的過程，就稱為會話跟蹤技術
cookie的特性
cookie可以實現跨頁面全局變量
cookie可以跨越同域名下的多個網頁，但不能跨域使用
cookie會隨着HTTP請求發送給服務器
cookie會存儲於訪問者的計算機中
同一個網站中所有頁面共享一套cookie
可以設置有效期限
存儲空間為4KB左右
cookie應用場景
* 會話狀態管理（如用戶登錄狀態、購物車等）
* 個性化設置（保存用戶設置的樣式等）
* 瀏覽器行為跟蹤（如跟蹤分析用戶行為等）
cookie的缺點
cookie可能被禁用
cookie與瀏覽器相關，不能互相訪問
cookie可能被用戶刪除
cookie安全性不夠高
cookie會隨着HTTP請求發送給服務器
cookie存儲空間很小(只有4KB左右)
cookie操作麻煩，沒有方便的API
操作cookie
每個cookie都是一個鍵/值對格式的字符串(key=value)
設置cookie：
document.cookie="user1=xh";
document.cookie="user2=xm";
如果要改變一個cookie的值，只能重新賦值
設置有效期：
var d=new Date();
d.setDate(d.getDate()+3); //按天數設置
document.cookie="user3=xd; expires="+d;
讀取cookie：
var cookies = document.cookie;
只能夠一次獲取所有的cookie值
使用時必須自己解析這個字符串，來獲取指定的cookie值
刪除cookie：
cookie過期會自動消失
要刪除一個cookie，可將其有效期設為一個過去的時間
var d=new Date();
d.setDate(d.getDate()-1);
document.cookie="user1=xh; expires="+d;
HTML5本地存儲
H5本地存儲有 localStorage 與 sessionStorage 兩種
優點：
更大的存儲空間，有5MB左右
不會隨HTTP請求發送給服務器
有方便的API操作
移動端普及高
兼容情況:
localStorage 為永久性保存數據，不會隨着瀏覽器的關閉而消失。
按域名進行存儲，可以在同域名下跨頁面訪問，不會和其他域名沖突。
按鍵值對存儲：key/value
操作：
localStorage.setItem(key , value) 保存或設置數據
如果key已經存在，則覆蓋key對應的value
如果不存在則添加key與value
localStorage.getItem(key) 獲取key對應的value
如果key不存在則返回null
localStorage.key(index) 獲取指定下標位置的key
localStorage.length 獲取數據條數（長度）
配合key(index)方法可以實現遍歷localStorage數據的方法
localStorage.clear() 將同域名下的所有數據都清空
localStorage.removeItem('key') 刪除某個鍵值對
sessionStorage 為臨時性保存數據，當頁面關閉就會消失
sessionStorage 不能跨頁面訪問，只局限在當前的標簽頁
sessionStorage 各種操作與 localStorage 一樣
JSON
目前 JavaScript 使用非常多的 json 格式
可以使用 JSON.stringify() 將 json對象 轉為 json字符串
然后把 json字符串 存儲在 cookie 或 localStorage 里面
讀取出來以后使用 JSON.parse() 將 json字符串 轉為 json對象
示例：
var jsonObj = {"name1":"jack","name2":"lily"};
localStorage.setItem("user",JSON.stringify(jsonObj)); // 存儲
var jsonObj = JSON.parse(localStorage.getItem("user")); // 讀取