一、cookie

cookie是可以用來儲存少量資料在本地的，預設情況下關閉瀏覽器後cookie資料就會被自動清除，僅關閉當前標籤頁並不會刪除cookie。cookie是可讀可寫的。

cookie的注意事項：
1、不同的瀏覽器存放的cookie位置是不一樣的，也不能通用
2、cookie的儲存是以域名形式進行區分的。
3、cookie的資料可以設定它的名字，類似於json
4、一個域名下存放的cookie的個數是有限的，不同的瀏覽器存放的個數不一樣，大概為20~50個不等
5、每個cookie存放的內容大小也是有限的，不同的瀏覽器存放大小不一樣，大概為4kB左右
6、想長時間的存放cookie，則需要在設定cookie的時候同時給他設定一個過期時間expires
Chrome瀏覽器：不允許儲存cookie在本地，需要伺服器環境才能進行儲存cookie。（如果在本地進行測試可以使用火狐瀏覽器）

1、設定cookie

cookie是document物件下面的一個屬性，所以在訪問cookie屬性的時候應該寫document.cookie

// 僅設定cookie資料，不設定過期時間
document.cookie = 'username=winne';  // 字串拼接的方式設定
document.cookie = ["password", '=', "123456"].join('');  // 陣列拼接為字串的方式設定


// 設定cookie資料的同時設定過期時間
var expiresDays = 6; // 幾天後過期
var oDate = new Date();
oDate.setDate
 
(oDate.getDate() + expiresDays); //返回調整過的日期的毫秒
// 注意在設定過期時間的時候expires後面跟的是時間字串的毫秒數
document.cookie = 'username=winne;expires=' + oDate.toGMTString();
document.cookie = ["password", '=', "123456", ";expires=", oDate.toGMTString()].join('');

注意：上面的方法中cookie資料只能一條一條設定，不能直接多個一起設定，expires是cookie內建的配置項，所以可以直接和資料一起同時設定。資料項和過期時間中間使用英文逗號隔開。
cookie值也可以設定為陣列。

2、獲取完整cookie

我們通過document.cookie來獲取當前網站下的cookie的時候，得到的是字串形式的值，它包含了當前網站下的所有cookie，他會把所有的cookie通過一個（分號+空格）的形式串聯起來。

// 我們列印獲取到的所有cookie
console.log(document.cookie);
// 列印輸出結果如下
// username=winne; password=123456

從上面的列印程式碼可以看出：每個cookie資料項是使用等號相連，等號前面為cookie名稱，等號後面為cookie值。兩兩cookie資料項之間使用（分號+空格）分隔。

3、獲取指定名稱的cookie對應的值

3.1、我們根據document.cookie獲取到的所有cookie的格式進行字串分割取出自己想要的cookie值。

// 封裝為一個函式，函式傳入想要獲取的cookie名稱即可獲取到對應的值
	function getCookie(name) {
            var arr1 = document.cookie.split('; ');  //先進行第一次分割（英文分號和空格）（得到cookie每一項的陣列）
            for (var i = 0; i < arr1.length; i++) { //迴圈這個陣列
                var arr2 = arr1[i].split('='); //在每一次迴圈中再通過等號分割陣列每一項的字串，對應得到cookie名和cookie值，再存到另外一個數組
                if (arr2[0] == name) {  //判斷陣列中的第一項是不是和我們傳進來要找的cookie名一致
                    var cookieValue = arr2[1];
                    console.log(cookieValue)
                    return cookieValue; //一致的話就返回cookie值，注意是陣列的第二項
                }
            }
        }
 getCookie("username");  // winne
 getCookie("password");  // 123456

3.2、通過正則表示式進行匹配獲取到對應名稱cookie的值

function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (arr !== null) {
            var cookieValue = arr[2]; //arr[2]為匹配到的cookie值
            console.log(cookieValue)
            return cookieValue ;            
        }
}
getCookie("username");  // winne
getCookie("password");  // 123456

4、移除cookie

expires指的是儲存時間，如果時間比現在早的話，瀏覽器就會刪除該cookie。
移除cookie函式，把要移出的cookie名傳入，再把它的值置為空，然後過期時間設定為過去就行了。（這樣就獲取不到值了，然後關閉瀏覽器之後這項cookie就會被清除）

function removeCookie(name) {
	document.cookie = [name, '=', "", ";expires=", -1].join('');
}

二、sessionStorage

sessionStorage 是HTML5新增的一個會話儲存物件，用於臨時儲存少量的資料在本地，在關閉瀏覽器視窗或關閉當前標籤頁之後將會刪除這些資料。 儲存大小為5MB左右。
sessionStorage 都 是 window 對 象 下 的 子 對 象， 也 就 是 說window可以省略，sessionStorage.getItem() 其實是 window.sessionStorage.getItem() 的簡寫。

sessionStorage物件下面的方法：

//設定資料到sessionStorage
sessionStorage.setItem("username","winne");
sessionStorage.setItem("password","123456");

// 從sessionStorage獲取名為username資料
var user = sessionStorage.getItem("username");
// 等價於 var user = sessionStorage.username;
console.log(user); // winne

// 獲取sessionStorage的第一項資料
console.log(sessionStorage); // {password: "123456", username: "winne", length: 2}
// json排序預設是先數字後字母，字母從小到大排序
var value1 = sessionStorage.key(0);
var value2 = sessionStorage.key(1);
console.log(value1); // password
console.log(value2); // username

// 刪除sessionStorage中的某個資料
sessionStorage.removeItem("username");
console.log(sessionStorage); // {password: "123456", length: 1}

// 清空sessionStorage
sessionStorage.clear();
console.log(sessionStorage); // {length: 0}

三、localStorage

localStorage用於持久化的本地儲存少量資料在本地，除非主動刪除資料，否則資料是永遠不會過期的。 儲存大小為5MB左右。
localStorage 是 window 對 象 下 的 子 對 象， 也 就 是 說window可以省略，localStorage.getItem() 其實是 window.localStorage.getItem() 的簡寫。

localStorage 物件下面的方法：
localStorage 物件下面的這些方法的用法和sessionStorage物件的方法的用法一致，所以這裡將不再演示。

localStorage不主動刪除或者清除快取，那麼將會永遠儲存資料在本地。
如何想設定localStorage在一定時間內有效，那麼網上也有自定義封裝設定localStorage的過期時間，可自行百度。

個人總結：

1、如果希望資料長久儲存，不受關閉瀏覽器和關閉標籤頁的影響就使用localStorage儲存資料。
2、如果希望資料在關閉瀏覽器後就清除改資料，建議使用sessionStorage儲存資料，因為它的api方便操作。
3、如果希望資料在一定的時間內儲存，不受關閉瀏覽器和關閉標籤頁的影響建議使用cookie進行儲存資料。