常见的浏览器存储方式（cookie、localStorage、sessionStorage）

今天我们从前端的角度了解一下浏览器存储，我们常见且常用的存储方式主要由两种：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);　　　　}　　}}