今天我們從前端的角度了解一下瀏覽器存儲，我們常見且常用的存儲方式主要由兩種：cookie、webStorage（localStorage和sessionStorage）。下面我們來一一認識它們。

Cookie基于HTTP規范，用來識別用戶。

Cookie是服務器發送到瀏覽器的一小段數據，會在瀏覽器下次向同一服務器再發起請求時被攜帶并發送到服務器上。

Cookie誕生之初的作用就是解決HTTP的無狀態請求，用來記錄一些用戶相關的一些狀態。

•會話狀態管理（如用戶登錄狀態、購物車、游戲分數或其它需要記錄的信息）
•個性化設置（如用戶自定義設置、主題等）
•瀏覽器行為跟蹤（如跟蹤分析用戶行為等）

因為一些前端交互的需要，后來cookie也被用于存儲一些客戶端的數據。

Cookie的原生api不友好，需要自行封裝一下。下面是封裝后的方法。

創建cookie

/*** @description js原生設置cookie* @param {String} name 給你要設置的cookie起個名字（key）* @param {String} value cookie的具體內容(value)* @param {String} expiredays 設置cookie的過期時間，單位：天*/function setCookie(name, value, expiredays) {var exdate=new Date();exdate.setDate(exdate.getDate() + expiredays);document.cookie = name + '=' + escape(value)+ ((expiredays == null) ? '' : ';expires=' +exdate.toGMTString());}

獲取cookie

/*** @description js原生獲取cookie方法1* @param {String} name 你要獲取的cookie名*/function getCookie(name) {　　if (document.cookie.length > 0) {　　　　var start = document.cookie.indexOf(name + '=');　　　　if (start !== -1) {　　　　　　start = start + name.length + 1;　　　　　　var end = document.cookie.indexOf(';', start);　　　　　　if (end === -1) {　　　　　　　　end = document.cookie.length;　　　　　　　　return unescape(document.cookie.substring(start, end));　　　　　　}　　　}　　}　　return '';}/*** @description js原生獲取cookie方法2* @param {String} name 你要獲取的cookie名*/function getCookie(name) {　　var cookieArr = document.cookie.split(';') || [];　　if(!cookieArr.length){　　　　return '';　　}　　for(var i = 0; i < cookieArr.length; i ++){　　　　var key = $.trim(cookieArr[i]).split('=')[0];　　　　var value = $.trim(cookieArr[i]).split('=')[1];　　　　if(key === name){　　　　　　return value;　　　　}　　}}

檢查cookie是否已存在

function checkCookie() {　　username = getCookie('username');　　if (username !== null && username !== '') {　　　　alert('Welcome again ' + username + '!');　　} else {　　　　username = prompt('Please enter your name:', '');　　　　if (username !== null && username !== '') {　　　　　　setCookie('username',username,365);　　　　}　　}}