一、document.cookiehtml
能夠獲取獲得cookie字符串,cookie都是鍵值對形式,因此獲得的字符串爲key=value形式,多個鍵值對之間用分號(;)拼接html5
存儲在cookie中value值,通常須要適用escape()函數對字符串進行編碼。api
注:escape()不會對ASCII中的字母和數字以及 * @ - _ + . / 。進行編碼,其餘都會被替換成16進制的轉義序列。unescape()可進行解碼。瀏覽器
console.log(escape('測試123')) //"%u6D4B%u8BD5123"
二、建立cookie服務器
document.cookie=name+'='+escape(value)+';expires='+expiedDate.toGMTString()cookie
name:自定義cookie的名稱,value爲對應的值,若須要設置過時時間,能夠加上';expires='+expiedDate.toGMTString(),若無過時時間限制可省略expiressession
三、查詢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。