原生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。