原生js獲取和設置cookie

一、document.cookie

能夠獲取獲得cookie字符串，cookie都是鍵值對形式，因此獲得的字符串爲key=value形式，多個鍵值對之間用分號（;）拼接

存儲在cookie中value值，通常須要適用escape()函數對字符串進行編碼。

注：escape()不會對ASCII中的字母和數字以及 * @ - _ + . / 。進行編碼，其餘都會被替換成16進制的轉義序列。unescape()可進行解碼。

console.log(escape('測試123')) //"%u6D4B%u8BD5123"

二、建立cookie

document.cookie=name+'='+escape(value)+';expires='+expiedDate.toGMTString()

name:自定義cookie的名稱，value爲對應的值，若須要設置過時時間，能夠加上';expires='+expiedDate.toGMTString()，若無過時時間限制可省略expires

三、查詢cookie

根據name值查詢對應的value值

function getCookie(name) { // var cookieStr=document.cookie;
     var cookieStr='zml=123;cc=90ddd;oo=oplm9'; //判斷是否有cookie值
        if (cookieStr.length) { //判斷是否存在name值
            if (cookieStr.indexOf(name) !== -1) { var start_index = cookieStr.indexOf(name) + name.length + 1; var end_index = cookieStr.indexOf(';', start_index); if(end_index===-1){//如果最後一對cookie則不以；分號結尾
                end_index=cookieStr.length; } return cookieStr.substring(start_index, end_index); } } return ''; }

 

四、cookies，sessionStorage 和 localStorage 的區別

html5中的Web Storage包括了兩種存儲方式sessionStorage和localStorage。和cookie類似，都是保存在瀏覽器端，但區別是它是爲了更大容量存儲設計的。

a、cookie數據始終在同源的http請求中攜帶，即便不使用，也在瀏覽器和服務器之間來回傳遞，會形成帶寬的浪費。而sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地存儲。

b、存儲大小不一樣，cookie數據不能超過4k，只適合保存很小的數據。sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大不少，能夠達到5M或者更多。

c、數據有效期不一樣，cookie能夠設置過時時間，sessionStorage是會話級的數據，瀏覽器關閉即清除，localStorage是永久性的數據，除非手動清除，不然一旦設置都一直存在。

d、sessionStorage不跨窗口，在另一個窗口打開sessionStorage就不存在了，它只在當前窗口有效，而cookie和localStorage都是跨窗口的，即便瀏覽器的窗口關閉，這兩個值仍是存在的。

f、Web Storage的api接口使用更加方便。例如： setItem,getItem,removeItem,clear等方法，不像cookie須要開發者本身封裝setCookie，getCookie。